feat: ✨ Update shiki to latest version, add code focus plugin

app/entities/users/page.mdx

@@ -11,7 +11,7 @@ export const metadata = {
   <Col>
 
     <Properties>
-      <Property name="contact.created">
+      <Property name="avatar">
         A new contact was created.
       </Property>
     </Properties>
@@ -25,8 +25,7 @@ export const metadata = {
         "type": "User",
         "uri": "https://social.lysand.org/users/018ec082-0ae1-761c-b2c5-22275a611771",
         "created_at": "2024-04-09T01:38:51.743Z",
-        // [!code focus:10]
-        "avatar": {
+        "avatar": { // [!code focus:100]
             "application/octet-stream": {
                 "content": "https://avatars.githubusercontent.com/u/30842467?v=4"
             }

mdx/rehype.mjs

@@ -1,8 +1,13 @@
+import {
+    transformerMetaHighlight,
+    transformerNotationFocus,
+    transformerNotationHighlight,
+} from "@shikijs/transformers";
 import { slugifyWithCounter } from "@sindresorhus/slugify";
 import * as acorn from "acorn";
 import { toString as mdastToString } from "mdast-util-to-string";
 import { mdxAnnotations } from "mdx-annotations";
-import shiki from "shiki";
+import { createCssVariablesTheme, createHighlighter } from "shiki";
 import { visit } from "unist-util-visit";
 
 function rehypeParseCodeBlocks() {
@@ -17,14 +22,31 @@ function rehypeParseCodeBlocks() {
     };
 }
 
-let highlighter;
+const myTheme = createCssVariablesTheme({
+    name: "css-variables",
+    variablePrefix: "--shiki-",
+    variableDefaults: {},
+    fontStyle: true,
+});
+
+const highlighter = await createHighlighter({
+    langs: [
+        "typescript",
+        "javascript",
+        "json",
+        "css",
+        "html",
+        "json5",
+        "jsonc",
+        "bash",
+        "php",
+        "python",
+    ],
+    themes: [myTheme],
+});
 
 function rehypeShiki() {
     return async (tree) => {
-        highlighter =
-            highlighter ??
-            (await shiki.getHighlighter({ theme: "css-variables" }));
-
         visit(tree, "element", (node) => {
             if (
                 node.tagName === "pre" &&
@@ -36,18 +58,17 @@ function rehypeShiki() {
                 node.properties.code = textNode.value;
 
                 if (node.properties.language) {
-                    const tokens = highlighter.codeToThemedTokens(
-                        textNode.value,
-                        node.properties.language,
-                    );
-
-                    textNode.value = shiki.renderToHtml(tokens, {
-                        elements: {
-                            pre: ({ children }) => children,
-                            code: ({ children }) => children,
-                            line: ({ children }) => `<span>${children}</span>`,
-                        },
+                    const html = highlighter.codeToHtml(textNode.value, {
+                        lang: node.properties.language,
+                        theme: myTheme,
+                        transformers: [
+                            transformerNotationFocus(),
+                            transformerNotationHighlight(),
+                            transformerMetaHighlight(),
+                        ],
                     });
+
+                    textNode.value = html;
                 }
             }
         });

package.json

@@ -18,7 +18,6 @@
         "@mdx-js/loader": "^3.0.1",
         "@mdx-js/react": "^3.0.1",
         "@next/mdx": "^14.2.5",
-        "@shikijs/rehype": "^1.11.0",
         "@sindresorhus/slugify": "^2.2.1",
         "@tailwindcss/typography": "^0.5.13",
         "@types/mdx": "^2.0.13",
@@ -42,7 +41,7 @@
         "remark": "^15.0.1",
         "remark-gfm": "^4.0.0",
         "remark-mdx": "^3.0.1",
-        "shiki": "0.14.7",
+        "shiki": "^1.11.0",
         "simple-functional-loader": "^1.2.1",
         "tailwindcss": "^3.4.6",
         "typescript": "^5.5.3",
@@ -52,6 +51,7 @@
     },
     "devDependencies": {
         "@biomejs/biome": "^1.8.3",
+        "@shikijs/transformers": "^1.11.0",
         "eslint": "^9.7.0",
         "eslint-config-next": "^14.2.5",
         "prettier": "^3.3.3",

styles/tailwind.css

@@ -14,6 +14,75 @@
   [inert] ::-webkit-scrollbar {
     display: none;
   }
+
+  .prose [class*='language-'] code .highlighted {
+    background-color: var(--vp-code-line-highlight-color);
+    transition: background-color 0.5s;
+    margin: 0 -24px;
+    padding: 0 24px;
+    width: calc(100% + 48px);
+    display: inline-block;
+  }
+
+  .prose [class*='language-'] code .highlighted.error {
+    background-color: var(--vp-code-line-error-color);
+  }
+
+  .prose [class*='language-'] code .highlighted.warning {
+    background-color: var(--vp-code-line-warning-color);
+  }
+
+  .prose [class*='language-'] code .diff {
+    transition: background-color 0.5s;
+    margin: 0 -24px;
+    padding: 0 24px;
+    width: calc(100% + 48px);
+    display: inline-block;
+  }
+
+  .prose [class*='language-'] code .diff:before {
+    position: absolute;
+    left: 10px;
+  }
+
+  .prose [class*='language-'] .has-focused .line:not(.focused) {
+    filter: blur(0.095rem);
+    opacity: 0.4;
+    transition:
+      filter 0.35s,
+      opacity 0.35s;
+  }
+
+  .prose [class*='language-'] .has-focused .line:not(.focused) {
+    opacity: 0.7;
+    transition:
+      filter 0.35s,
+      opacity 0.35s;
+  }
+
+  .prose [class*='language-']:hover .has-focused .line:not(.focused) {
+    filter: blur(0);
+    opacity: 1;
+  }
+
+  .prose [class*='language-'] code .diff.remove {
+    background-color: var(--vp-code-line-diff-remove-color);
+    opacity: 0.7;
+  }
+
+  .prose [class*='language-'] code .diff.remove:before {
+    content: '-';
+    color: var(--vp-code-line-diff-remove-symbol-color);
+  }
+
+  .prose [class*='language-'] code .diff.add {
+    background-color: var(--vp-code-line-diff-add-color);
+  }
+
+  .prose [class*='language-'] code .diff.add:before {
+    content: '+';
+    color: var(--vp-code-line-diff-add-symbol-color);
+  }
 }
 
 @tailwind base;