chore(blog): update shiki to v1.6.0 and update next-mdx-remote to v5.0.0

app/globals.css

@@ -62,15 +62,17 @@ code {
 code .line::before {
   content: counter(step);
   counter-increment: step;
-  width: 1rem;
+  margin-right: 1rem;
-  margin-right: 1.5rem;
-  display: inline-block;
   text-align: right;
   color: rgba(133, 133, 133, 0.8);
   word-wrap: normal;
   word-break: normal;
 }
 
+code .line:last-child {
+  display: none;
+}
+
 .katex .base {
   display: inline !important;
   white-space: normal !important;

blog/BlogPostContent.tsx

@@ -1,22 +1,22 @@
+import { faLink } from "@fortawesome/free-solid-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { nodeTypes } from "@mdx-js/mdx"
+import rehypeShikiFromHighlighter from "@shikijs/rehype/core"
+import { MDXRemote } from "next-mdx-remote/rsc"
+import { cookies } from "next/headers"
 import Image from "next/image"
 import Link from "next/link"
-import { cookies } from "next/headers"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import { faLink } from "@fortawesome/free-solid-svg-icons"
-import { MDXRemote } from "next-mdx-remote/rsc"
-import { nodeTypes } from "@mdx-js/mdx"
-import rehypeRaw from "rehype-raw"
-import remarkGfm from "remark-gfm"
-import rehypeSlug from "rehype-slug"
-import remarkMath from "remark-math"
 import rehypeKatex from "rehype-katex"
-import { getHighlighter } from "shiki"
+import rehypeRaw from "rehype-raw"
+import rehypeSlug from "rehype-slug"
+import remarkGfm from "remark-gfm"
+import remarkMath from "remark-math"
+import { getHighlighterCore } from "shiki/core"
 
 import "katex/dist/katex.min.css"
 
-import { getTheme } from "@/theme/theme.server"
-import { remarkSyntaxHighlightingPlugin } from "@/blog/remarkSyntaxHighlightingPlugin"
 import { BlogPostComments } from "@/blog/BlogPostComments"
+import { getTheme } from "@/theme/theme.server"
 
 const Heading = (
   props: React.DetailedHTMLProps<
@@ -50,8 +50,19 @@ export const BlogPostContent = async (
   const cookiesStore = cookies()
   const theme = getTheme()
 
-  const highlighter = await getHighlighter({
+  const highlighter = await getHighlighterCore({
-    theme: `${theme}-plus`,
+    themes: [
+      import("shiki/themes/light-plus.mjs"),
+      import("shiki/themes/dark-plus.mjs"),
+    ],
+    langs: [
+      import("shiki/langs/markdown.mjs"),
+      import("shiki/langs/shell.mjs"),
+      import("shiki/langs/javascript.mjs"),
+      import("shiki/langs/typescript.mjs"),
+      import("shiki/langs/python.mjs"),
+    ],
+    loadWasm: import("shiki/wasm"),
   })
 
   return (
@@ -61,15 +72,18 @@ export const BlogPostContent = async (
           source={content}
           options={{
             mdxOptions: {
-              remarkPlugins: [
+              remarkPlugins: [remarkGfm, remarkMath],
-                remarkGfm,
-                [remarkSyntaxHighlightingPlugin, { highlighter }],
-                remarkMath,
-              ],
               rehypePlugins: [
                 rehypeSlug,
                 [rehypeRaw, { passThrough: nodeTypes }],
                 rehypeKatex,
+                [
+                  rehypeShikiFromHighlighter,
+                  highlighter,
+                  {
+                    theme: `${theme}-plus`,
+                  },
+                ],
               ],
             },
           }}

blog/remarkSyntaxHighlightingPlugin.ts

@@ -1,32 +0,0 @@
-import type { Plugin, Transformer } from "unified"
-import type { Literal, Node } from "unist"
-import { visit } from "unist-util-visit"
-import type { Highlighter } from "shiki"
-
-export interface RemarkSyntaxHighlightingPluginOptions {
-  highlighter: Highlighter
-}
-
-export interface RemarkSyntaxHighlightingNode extends Node {
-  lang: string
-  meta: string
-  children: undefined
-  value: string
-  data: Record<string, unknown>
-}
-
-export const remarkSyntaxHighlightingPlugin: Plugin<
-  [RemarkSyntaxHighlightingPluginOptions],
-  Literal
-> = (options) => {
-  const transformer: Transformer<RemarkSyntaxHighlightingNode> = (tree) => {
-    visit<RemarkSyntaxHighlightingNode, string>(tree, "code", (node) => {
-      node.type = "html"
-      node.children = undefined
-      node.value = options.highlighter.codeToHtml(node.value, {
-        lang: node.lang,
-      })
-    })
-  }
-  return transformer
-}

components/Header/index.tsx

@@ -17,7 +17,7 @@ export const Header = (): JSX.Element => {
       <h1>
         <Link
           href="/"
-          className="flex items-center justify-center transition-all duration-300 ease-in-out hover:scale-[1.03]"
+          className="flex items-center justify-center transition-all duration-300 ease-in-out hover:scale-105"
         >
           <Image
             quality={100}

package.json

@@ -13,7 +13,8 @@
   "scripts": {
     "dev": "next dev",
     "start": "next start",
-    "build": "npm run curriculum-vitae:build && next build",
+    "build": "npm run build:curriculum-vitae && next build",
+    "build:curriculum-vitae": "node ./curriculum-vitae/build.js",
     "lint:commit": "commitlint",
     "lint:editorconfig": "editorconfig-checker",
     "lint:markdown": "markdownlint-cli2",
@@ -24,7 +25,6 @@
     "test:html-w3c-validator": "start-server-and-test \"start\" \"http://127.0.0.1:3000\" \"html-w3c-validator\"",
     "test:e2e": "start-server-and-test \"start\" http://127.0.0.1:3000 \"cypress run\"",
     "test:dev": "start-server-and-test \"dev\" \"http://127.0.0.1:3000\" \"cypress open\"",
-    "curriculum-vitae:build": "node ./curriculum-vitae/build.js",
     "release": "semantic-release",
     "postinstall": "husky"
   },
@@ -34,8 +34,9 @@
     "@fortawesome/fontawesome-svg-core": "6.5.2",
     "@fortawesome/free-brands-svg-icons": "6.5.2",
     "@fortawesome/free-solid-svg-icons": "6.5.2",
-    "@fortawesome/react-fontawesome": "0.2.1",
+    "@fortawesome/react-fontawesome": "0.2.2",
     "@giscus/react": "3.0.0",
+    "@shikijs/rehype": "1.6.0",
     "clsx": "2.1.1",
     "date-and-time": "3.3.0",
     "gray-matter": "4.0.3",
@@ -44,19 +45,17 @@
     "katex": "0.16.10",
     "negotiator": "0.6.3",
     "next": "14.1.0",
-    "next-mdx-remote": "4.4.1",
+    "next-mdx-remote": "5.0.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "read-pkg": "9.0.1",
-    "rehype-katex": "6.0.3",
+    "rehype-katex": "7.0.0",
-    "rehype-raw": "6.1.1",
+    "rehype-raw": "7.0.0",
-    "rehype-slug": "5.1.0",
+    "rehype-slug": "6.0.0",
-    "remark-gfm": "3.0.1",
+    "remark-gfm": "4.0.0",
-    "remark-math": "5.1.1",
+    "remark-math": "6.0.0",
     "sharp": "0.33.4",
-    "shiki": "0.14.7",
+    "shiki": "1.6.0",
-    "unified": "10.1.2",
-    "unist-util-visit": "5.0.0",
     "universal-cookie": "7.1.4"
   },
   "devDependencies": {
@@ -70,23 +69,22 @@
     "@types/negotiator": "0.6.3",
     "@types/node": "20.12.12",
     "@types/react": "18.3.2",
-    "@types/unist": "3.0.2",
     "@typescript-eslint/eslint-plugin": "7.10.0",
     "@typescript-eslint/parser": "7.10.0",
     "autoprefixer": "10.4.19",
     "curriculum-vitae": "file:./curriculum-vitae",
-    "cypress": "13.9.0",
+    "cypress": "13.10.0",
     "editorconfig-checker": "5.1.5",
     "eslint": "8.57.0",
     "eslint-config-conventions": "14.2.0",
     "eslint-config-next": "14.1.0",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-promise": "6.1.1",
-    "eslint-plugin-tailwindcss": "3.15.2",
+    "eslint-plugin-tailwindcss": "3.17.0",
     "eslint-plugin-unicorn": "53.0.0",
-    "html-w3c-validator": "1.6.1",
+    "html-w3c-validator": "1.6.2",
     "husky": "9.0.11",
-    "lint-staged": "15.2.2",
+    "lint-staged": "15.2.4",
     "markdownlint-cli2": "0.13.0",
     "markdownlint-rule-relative-links": "2.3.2",
     "postcss": "8.4.38",