versia-pub/docs
2
0
Fork 0
mirror of https://github.com/versia-pub/docs.git synced 2025-12-06 14:28:20 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: 💄 Change code block theme to Dark Plus

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-07-25 14:18:17 +02:00
parent 66a0c94652
commit 1759c4ffba
No known key found for this signature in database
2 changed files with 6 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/Code.tsx
View file

@ -162,7 +162,7 @@ function CodePanel({
<div className="group dark:bg-white/2.5"> <div className="group dark:bg-white/2.5">
<CodePanelHeader tag={tag} label={label} /> <CodePanelHeader tag={tag} label={label} />
<div className="relative"> <div className="relative">
<pre className="overflow-x-auto p-4 text-xs text-white"> <pre className="overflow-x-auto p-4 text-xs text-white [&>code>pre]:!bg-transparent">
{children} {children}
</pre> </pre>
<CopyButton code={code} /> <CopyButton code={code} />

15
mdx/rehype.mjs
View file

@ -7,7 +7,7 @@ import { slugifyWithCounter } from "@sindresorhus/slugify";
import * as acorn from "acorn"; import * as acorn from "acorn";
import { toString as mdastToString } from "mdast-util-to-string"; import { toString as mdastToString } from "mdast-util-to-string";
import { mdxAnnotations } from "mdx-annotations"; import { mdxAnnotations } from "mdx-annotations";
import { createCssVariablesTheme, createHighlighter } from "shiki"; import { createHighlighter } from "shiki";
import { visit } from "unist-util-visit"; import { visit } from "unist-util-visit";
function rehypeParseCodeBlocks() { function rehypeParseCodeBlocks() {
@ -22,13 +22,6 @@ function rehypeParseCodeBlocks() {
}; };
} }
const myTheme = createCssVariablesTheme({
name: "css-variables",
variablePrefix: "--shiki-",
variableDefaults: {},
fontStyle: true,
});
const highlighter = await createHighlighter({ const highlighter = await createHighlighter({
langs: [ langs: [
"typescript", "typescript",
@ -42,9 +35,11 @@ const highlighter = await createHighlighter({
"php", "php",
"python", "python",
], ],
themes: [myTheme], themes: [],
}); });
highlighter.loadTheme("dark-plus");
function rehypeShiki() { function rehypeShiki() {
return async (tree) => { return async (tree) => {
visit(tree, "element", (node) => { visit(tree, "element", (node) => {
@ -60,7 +55,7 @@ function rehypeShiki() {
if (node.properties.language) { if (node.properties.language) {
const html = highlighter.codeToHtml(textNode.value, { const html = highlighter.codeToHtml(textNode.value, {
lang: node.properties.language, lang: node.properties.language,
theme: myTheme, theme: "dark-plus",
transformers: [ transformers: [
transformerNotationFocus(), transformerNotationFocus(),
transformerNotationHighlight(), transformerNotationHighlight(),