diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fc1c7f0..4792d48 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -112,12 +112,18 @@ importers: remark-rehype: specifier: ^10.1.0 version: 10.1.0 + shikiji: + specifier: ^0.5.1 + version: 0.5.1 svelte: specifier: ^4.2.0 version: 4.2.0 unified: specifier: ^11.0.1 version: 11.0.1 + unist-util-visit: + specifier: ^5.0.0 + version: 5.0.0 vite: specifier: ^4.4.9 version: 4.4.9(@types/node@18.17.5) @@ -1696,6 +1702,10 @@ packages: dependencies: mri: 1.2.0 + /shikiji@0.5.1: + resolution: {integrity: sha512-zH3HCKcLIcoqkaJ3v7T9XWEQi/ZOxqNrov4+B0G/zbNPheliBJy1kpJQ5zQtejCXptitc5i7I5yI00wkUen30A==} + dev: true + /sirv@2.0.3: resolution: {integrity: sha512-O9jm9BsID1P+0HOi81VpXPoDxYP374pkOLzACAoyUQ/3OUVndNpsz6wMnY2z+yOxzbllCKZrM+9QrWsv4THnyA==} engines: {node: '>= 10'} @@ -1822,6 +1832,12 @@ packages: '@types/unist': 2.0.7 dev: true + /unist-util-is@6.0.0: + resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==} + dependencies: + '@types/unist': 3.0.0 + dev: true + /unist-util-position@4.0.4: resolution: {integrity: sha512-kUBE91efOWfIVBo8xzh/uZQ7p9ffYRtUbMRZBNFYwf0RK8koUMx6dGUfwylLOKmaT2cs4wSW96QoYUSXAyEtpg==} dependencies: @@ -1847,6 +1863,13 @@ packages: unist-util-is: 5.2.1 dev: true + /unist-util-visit-parents@6.0.1: + resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==} + dependencies: + '@types/unist': 3.0.0 + unist-util-is: 6.0.0 + dev: true + /unist-util-visit@4.1.2: resolution: {integrity: sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==} dependencies: @@ -1855,6 +1878,14 @@ packages: unist-util-visit-parents: 5.1.3 dev: true + /unist-util-visit@5.0.0: + resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==} + dependencies: + '@types/unist': 3.0.0 + unist-util-is: 6.0.0 + unist-util-visit-parents: 6.0.1 + dev: true + /uvu@0.5.6: resolution: {integrity: sha512-+g8ENReyr8YsOc6fv/NVJs2vFdHBnBNdfE49rshrTzDWOlUx4Gq7KOS2GD8eqhy2j+Ejq29+SbKH8yjkAqXqoA==} engines: {node: '>=8'} diff --git a/site/package.json b/site/package.json index 16aa499..871bfce 100644 --- a/site/package.json +++ b/site/package.json @@ -28,8 +28,10 @@ "remark-gfm": "^3.0.1", "remark-parse": "^10.0.2", "remark-rehype": "^10.1.0", + "shikiji": "^0.5.1", "svelte": "^4.2.0", "unified": "^11.0.1", + "unist-util-visit": "^5.0.0", "vite": "^4.4.9" } } diff --git a/site/scripts/rehypeShikiji.js b/site/scripts/rehypeShikiji.js new file mode 100644 index 0000000..8b2c853 --- /dev/null +++ b/site/scripts/rehypeShikiji.js @@ -0,0 +1,50 @@ +import { visit, SKIP } from 'unist-util-visit' +import { codeToHast } from 'shikiji' + +/** + * @returns {import('unified').Transformer} + */ +export function rehypeShikiji() { + return async (tree) => { + /** @type {typeof tree[]} */ + const preNodes = [] + + // visit is sync only + visit(tree, async (node) => { + if (node.type === 'element' && node.tagName === 'pre') { + preNodes.push(node) + return SKIP + } + }) + + for (const node of preNodes) { + const codeNode = node.children?.[0] + + const language = codeNode.properties?.className?.[0]?.replace( + 'language-', + '' + ) + if (!language) return + + const code = codeNode.children?.[0]?.value + if (!code) return + + const codeHast = await codeToHast(code, { + lang: language, + themes: { + light: 'light-plus', + dark: 'dark-plus' + } + }) + + const preHast = codeHast.children[0] + // too bright + preHast.properties.style = preHast.properties.style.replace( + 'background-color:#FFFFFF', + 'background-color:#f3f0f0' + ) + + Object.assign(node, preHast) + } + } +} diff --git a/site/scripts/vitePluginMarkdown.js b/site/scripts/vitePluginMarkdown.js index 3d51887..a140f68 100644 --- a/site/scripts/vitePluginMarkdown.js +++ b/site/scripts/vitePluginMarkdown.js @@ -7,6 +7,7 @@ import rehypeSlug from 'rehype-slug' import rehypeAutolinkHeadings from 'rehype-autolink-headings' import rehypeStringify from 'rehype-stringify' import { fileURLToPath } from 'node:url' +import { rehypeShikiji } from './rehypeShikiji.js' /** * @@ -18,6 +19,7 @@ export function markdown() { .use(remarkGfm) .use(remarkRehype) .use(rehypeSlug) + .use(rehypeShikiji) .use(rehypeAutolinkHeadings, { behavior: 'append', properties: { diff --git a/site/src/components/PkgNode.svelte b/site/src/components/PkgNode.svelte index 22a2429..98e6ced 100644 --- a/site/src/components/PkgNode.svelte +++ b/site/src/components/PkgNode.svelte @@ -61,9 +61,7 @@ > {:else} - {keyText} + {keyText} {JSON.stringify(value)} @@ -93,20 +91,26 @@ diff --git a/site/src/global.css b/site/src/global.css index b8e27a7..a1f0bd8 100644 --- a/site/src/global.css +++ b/site/src/global.css @@ -36,9 +36,9 @@ body { opacity: 0.8; } -.docs code { +.docs :not(pre) code { color: #121212; - background-color: #dcdcdc; + background-color: #cdcac9; border-radius: 0.25rem; padding: 0.15rem 0.25rem; } @@ -48,6 +48,11 @@ body { padding: 0.5rem 0.8rem; } +.docs .shiki { + border-radius: 0.25rem; + padding: 0.5rem; +} + .docs h2.active > code { background-color: hsl(29, 74%, 77%); } @@ -204,7 +209,7 @@ button { background-color: #2c2c2c; } - .docs code { + .docs :not(pre) code { color: #efefef; background-color: #434343; } @@ -227,6 +232,12 @@ button { color: #6fa6ff; } + .shiki, + .shiki span { + background-color: var(--shiki-dark-bg) !important; + color: var(--shiki-dark) !important; + } + button { background-color: #2c2c2c; color: #efefef;