quickshell/quickshell-web
3
1
Fork 0
Code Issues Projects Activity

shiki testing

Browse source
This commit is contained in:
Xanazf 2024-10-10 21:45:16 +03:00
parent 4fbb038c0d
commit 9c1f293a2a
Signed by: Xanazf
GPG key ID: 4E4A5AD1FB748427
3 changed files with 21 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
astro.config.mjs
View file

@ -7,6 +7,7 @@ import { markdownConfig } from "./src/config/io/markdown.ts";
// https://astro.build/config // https://astro.build/config
export default defineConfig({ export default defineConfig({
markdown: markdownConfig,
integrations: [ integrations: [
solidJs({ solidJs({
devtools: true, devtools: true,
@ -14,5 +15,4 @@ export default defineConfig({
mdx(), mdx(),
pagefind(), pagefind(),
], ],
markdown: markdownConfig,
}); });

30
src/config/io/markdown.ts
View file

@ -1,7 +1,7 @@
import type { Parent, Node } from "unist"; import type { Parent, Node } from "unist";
import { visit, CONTINUE, SKIP } from "unist-util-visit"; import { visit, CONTINUE, SKIP } from "unist-util-visit";
import { fromHtml } from "hast-util-from-html"; import { fromHtml } from "hast-util-from-html";
import type { Root, Element } from "hast"; import type { Root } from "hast";
import type { import type {
AstroMarkdownOptions, AstroMarkdownOptions,
MarkdownProcessor, MarkdownProcessor,
@ -69,27 +69,16 @@ const rehypeRewriteTypelinks: RehypePlugin<[]> = () => {
}; };
}; };
const shikiRewriteTypelinks = (): ShikiTransformer => { const shikiRewriteTypelinks: ShikiTransformer = {
return {
name: "rewrite-typelinks", name: "rewrite-typelinks",
preprocess(code, _options) { postprocess(code, _options) {
const qtRegExp = /QT_(\w+)/g;
const qsRegExp = /QS_(\w+)/g;
// WARN: need to change the code link identifier to this // WARN: need to change the code link identifier to this
// const hasTypelinks = code.search(/TYPE99(\w+.)99TYPE/g) !== -1; const regExp = /TYPE99(\w+.)99TYPE/g;
const hasQTLink = code.search(qtRegExp) !== -1; const hasTypelinks = code.search(regExp) !== -1;
const hasQSLink = code.search(qsRegExp) !== -1; console.log(hasTypelinks);
if (hasQTLink) { if (hasTypelinks) {
code.replace(qtRegExp, (_full: string, match: string) => { code.replace(regExp, (_full: string, match: string) => {
const linkObject = getQMLTypeLinkObject(match);
const link = getQMLTypeLink(linkObject);
return `<a href=${link}>${linkObject.name ?? ""}</a>`;
});
}
if (hasQSLink) {
code.replace(qsRegExp, (_full: string, match: string) => {
const linkObject = getQMLTypeLinkObject(match); const linkObject = getQMLTypeLinkObject(match);
const link = getQMLTypeLink(linkObject); const link = getQMLTypeLink(linkObject);
return `<a href=${link}>${linkObject.name ?? ""}</a>`; return `<a href=${link}>${linkObject.name ?? ""}</a>`;
@ -97,14 +86,13 @@ const shikiRewriteTypelinks = (): ShikiTransformer => {
} }
}, },
}; };
};
export const markdownConfig: AstroMarkdownOptions = { export const markdownConfig: AstroMarkdownOptions = {
syntaxHighlight: "shiki", syntaxHighlight: "shiki",
shikiConfig: { shikiConfig: {
theme: "material-theme-ocean", theme: "material-theme-ocean",
wrap: true, wrap: true,
transformers: [shikiRewriteTypelinks()], transformers: [shikiRewriteTypelinks],
}, },
remarkPlugins: [[remarkAlert, { legacyTitle: true }]], remarkPlugins: [[remarkAlert, { legacyTitle: true }]],
rehypePlugins: [ rehypePlugins: [

4
src/pages/docs/configuration/index.mdx
View file

@ -3,9 +3,11 @@ layout: "@layouts/ConfigLayout.astro"
title: "Configuration" title: "Configuration"
description: "Configuring the shell" description: "Configuring the shell"
--- ---
import MD_Title from "@components/MD_Title.tsx"
import MD_Title from "@components/MD_Title.tsx";
# <MD_Title titleVar={1}> {frontmatter.title} </MD_Title> # <MD_Title titleVar={1}> {frontmatter.title} </MD_Title>
You should start with the [Introduction](./configuration/intro) which will guide you You should start with the [Introduction](./configuration/intro) which will guide you
through the basics of QML by creating a simple topbar with a clock. through the basics of QML by creating a simple topbar with a clock.