Migrate syntax highlighter from Shikiji to Shiki, and made relevant changes

docusaurus.config.ts

@@ -174,7 +174,7 @@ const config: Config = {
 
 
   clientModules: [
-    "src/components/ShikijiLFHighlighter/shikijiloader.ts"
+    "src/components/ShikiLFHighlighter/shikiloader.ts"
   ],
 };
 

package.json

@@ -26,7 +26,7 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-transition-group": "^4.4.5",
-    "shikiji": "^0.7.4",
+    "shiki": "^1.5.1",
     "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {

src/components/LinguaFrancaMultiTargetUtils/LangSpecific.tsx

@@ -4,7 +4,7 @@ import TabItem from "@theme/TabItem";
 import styles from "./styles.module.css";
 import CodeBlock from "@theme/CodeBlock";
 import { ReactNode, useEffect, useState } from "react";
-import { ShikijiLFHighlighter } from "../ShikijiLFHighlighter";
+import { ShikiLFHighlighter } from "../ShikiLFHighlighter";
 
 interface WebpackImportedRawModule {
   default: Readonly<Record<string, string>>;
@@ -47,7 +47,7 @@ export const NoSelectorTargetCodeBlock = (
         string | Promise<WebpackImportedRawModule | null>
       >),
 ): JSX.Element => {
-  const Component = props.lf ? ShikijiLFHighlighter : CodeBlock;
+  const Component = props.lf ? ShikiLFHighlighter : CodeBlock;
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { lf, ...targetToCode } = props;
   const newProps: Record<TargetsType, ReactNode> = {} as Record<

src/components/ShikijiLFHighlighter/index.tsx → src/components/ShikiLFHighlighter/index.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
-import { HighlighterGeneric, BuiltinLanguage, BuiltinTheme } from "shikiji";
-import { loadShikiji } from "./shikijiloader";
+import { HighlighterGeneric, BuiltinLanguage, BuiltinTheme } from "shiki";
+import { loadShiki } from "./shikiloader";
 import { useColorMode } from "@docusaurus/theme-common";
 import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
 
@@ -12,7 +12,7 @@ declare global {
   }
 }
 
-export const ShikijiLFHighlighter = ({
+export const ShikiLFHighlighter = ({
   children,
   ...props
 }: { children: string } & Record<string, unknown>) => {
@@ -28,7 +28,7 @@ export const ShikijiLFHighlighter = ({
   useEffect(() => {
     (async () => {
       if (!isBrowser) return;
-      const shiki = await loadShikiji();
+      const shiki = await loadShiki();
       setCode(
         shiki.codeToHtml(children, {
           lang: "Lingua Franca",

src/components/ShikijiLFHighlighter/shikijiloader.ts → src/components/ShikiLFHighlighter/shikiloader.ts

@@ -1,8 +1,8 @@
 import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
-import { LanguageRegistration, getHighlighter } from "shikiji";
+import { LanguageRegistration, getHighlighter } from "shiki";
 import { targets } from "@site/src/components/LinguaFrancaMultiTargetUtils";
 import LFTextMateLanguageDefinition from "./lflang.tmLanguage.json";
-import { HighlighterGeneric, BuiltinLanguage, BuiltinTheme } from "shikiji";
+import { HighlighterGeneric, BuiltinLanguage, BuiltinTheme } from "shiki";
 
 declare global {
   interface Window {
@@ -12,11 +12,11 @@ declare global {
   }
 }
 
-export const loadShikiji = async () => {
+export const loadShiki = async () => {
   if (window.LFWebsite?.shikijiInstance != null) {
     return window.LFWebsite.shikijiInstance;
   }
-  const shikiji = await getHighlighter({
+  const shiki = await getHighlighter({
     themes: ["material-theme-lighter", "material-theme-darker"],
     langs: [
       ...targets,
@@ -27,19 +27,19 @@ export const loadShikiji = async () => {
   if (window.LFWebsite == null) {
     window.LFWebsite = {};
   }
-  window.LFWebsite.shikijiInstance = shikiji;
-  return shikiji;
+  window.LFWebsite.shikijiInstance = shiki;
+  return shiki;
 };
 
 if (ExecutionEnvironment.canUseDOM) {
   // As soon as the site loads in the browser, check if a Shikiji instance is created. If not, create one and save to global.
 
   // Don't catch. Let it throw~ let it throw~
-  loadShikiji().then((v) => {
+  loadShiki().then((v) => {
     if (v != null) {
-      console.log("Shikiji is loaded.");
+      console.log("Shiki loaded.");
     } else {
-      throw Error("Shikiji not loaded correctly.");
+      throw Error("Shiki did loaded correctly.");
     }
   });
 }

src/theme/CodeBlock/index.js

@@ -1,14 +1,14 @@
 import React from "react";
 import CodeBlock from "@theme-original/CodeBlock";
-import { ShikijiLFHighlighter } from "@site/src/components/ShikijiLFHighlighter";
+import { ShikiLFHighlighter } from "@site/src/components/ShikiLFHighlighter";
 
 export default function CodeBlockWrapper(props) {
   return (
     <>
       {/* If using <CodeBlock /> then it will contain language="lf-c"; if using ``` it will contain className="language-lf-c". */}
       {props.language?.startsWith("lf") ||
       props.className?.startsWith("language-lf") ? (
-        <ShikijiLFHighlighter {...props} />
+        <ShikiLFHighlighter {...props} />
       ) : (
         <CodeBlock {...props} />
       )}

yarn.lock

@@ -1908,6 +1908,11 @@
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.23.tgz#498e41218ab3b6a1419c735e5c6ae2c5ed609b6c"
   integrity sha512-C16M+IYz0rgRhWZdCmK+h58JMv8vijAA61gmz2rspCSwKwzBebpdcsiUmwrtJRdphuY30i6BSLEOP8ppbNLyLg==
 
+"@shikijs/[email protected]":
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@shikijs/core/-/core-1.5.1.tgz#22d8c3a43c66c30eea3988615ec6a947a1957ea3"
+  integrity sha512-xjV63pRUBvxA1LsxOUhRKLPh0uUjwBLzAKLdEuYSLIylo71sYuwDcttqNP01Ib1TZlLfO840CXHPlgUUsYFjzg==
+
 "@sideway/address@^4.1.3":
   version "4.1.4"
   resolved "https://registry.yarnpkg.com/@sideway/address/-/address-4.1.4.tgz#03dccebc6ea47fdc226f7d3d1ad512955d4783f0"
@@ -4929,24 +4934,6 @@ hast-util-to-estree@^3.0.0:
     unist-util-position "^5.0.0"
     zwitch "^2.0.0"
 
-hast-util-to-html@^9.0.0:
-  version "9.0.0"
-  resolved "https://registry.yarnpkg.com/hast-util-to-html/-/hast-util-to-html-9.0.0.tgz#51c0ae2a3550b9aa988c094c4fc4e327af0dddd1"
-  integrity sha512-IVGhNgg7vANuUA2XKrT6sOIIPgaYZnmLx3l/CCOAK0PtgfoHrZwX7jCSYyFxHTrGmC6S9q8aQQekjp4JPZF+cw==
-  dependencies:
-    "@types/hast" "^3.0.0"
-    "@types/unist" "^3.0.0"
-    ccount "^2.0.0"
-    comma-separated-tokens "^2.0.0"
-    hast-util-raw "^9.0.0"
-    hast-util-whitespace "^3.0.0"
-    html-void-elements "^3.0.0"
-    mdast-util-to-hast "^13.0.0"
-    property-information "^6.0.0"
-    space-separated-tokens "^2.0.0"
-    stringify-entities "^4.0.0"
-    zwitch "^2.0.4"
-
 hast-util-to-jsx-runtime@^2.0.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.0.tgz#3ed27caf8dc175080117706bf7269404a0aa4f7c"
@@ -8171,12 +8158,12 @@ shelljs@^0.8.5:
     interpret "^1.0.0"
     rechoir "^0.6.2"
 
-shikiji@^0.7.4:
-  version "0.7.5"
-  resolved "https://registry.yarnpkg.com/shikiji/-/shikiji-0.7.5.tgz#43a634853f0e32c1b9939a9d4f587c570f009561"
-  integrity sha512-He8lAcTZUVuUW+Z4VRPM+TP+HVZCe4R1qzrP7voUrmAKrFKE260YEUVgqcP7y/0ps0uVvKgVhu5vgIshGpGocQ==
+shiki@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/shiki/-/shiki-1.5.1.tgz#573602bb0f2d54f233b6a0102de7be8274ca5cab"
+  integrity sha512-vx4Ds3M3B9ZEmLeSXqBAB85osBWV8ErZfP69kuFQZozPgHc33m7spLTCUkcjwEjFm3gk3F9IdXMv8kX+v9xDHA==
   dependencies:
-    hast-util-to-html "^9.0.0"
+    "@shikijs/core" "1.5.1"
 
 side-channel@^1.0.4:
   version "1.0.4"
@@ -9170,7 +9157,7 @@ yocto-queue@^1.0.0:
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-1.0.0.tgz#7f816433fb2cbc511ec8bf7d263c3b58a1a3c251"
   integrity sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==
 
-zwitch@^2.0.0, zwitch@^2.0.4:
+zwitch@^2.0.0:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-2.0.4.tgz#c827d4b0acb76fc3e685a4c6ec2902d51070e9d7"
   integrity sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==