diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 201312b1d..078fa8fe2 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -174,7 +174,7 @@ const config: Config = { clientModules: [ - "src/components/ShikijiLFHighlighter/shikijiloader.ts" + "src/components/ShikiLFHighlighter/shikiloader.ts" ], }; diff --git a/package.json b/package.json index c7b707243..70d91963b 100644 --- a/package.json +++ b/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": { diff --git a/src/components/LinguaFrancaMultiTargetUtils/LangSpecific.tsx b/src/components/LinguaFrancaMultiTargetUtils/LangSpecific.tsx index 508c93b47..bfa2ba6b9 100644 --- a/src/components/LinguaFrancaMultiTargetUtils/LangSpecific.tsx +++ b/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>; @@ -47,7 +47,7 @@ export const NoSelectorTargetCodeBlock = ( string | Promise >), ): 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 = {} as Record< diff --git a/src/components/ShikijiLFHighlighter/index.tsx b/src/components/ShikiLFHighlighter/index.tsx similarity index 91% rename from src/components/ShikijiLFHighlighter/index.tsx rename to src/components/ShikiLFHighlighter/index.tsx index 4c3a9e0fe..8c29f33ab 100644 --- a/src/components/ShikijiLFHighlighter/index.tsx +++ b/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) => { @@ -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", diff --git a/src/components/ShikijiLFHighlighter/lflang.tmLanguage.json b/src/components/ShikiLFHighlighter/lflang.tmLanguage.json similarity index 100% rename from src/components/ShikijiLFHighlighter/lflang.tmLanguage.json rename to src/components/ShikiLFHighlighter/lflang.tmLanguage.json diff --git a/src/components/ShikijiLFHighlighter/shikijiloader.ts b/src/components/ShikiLFHighlighter/shikiloader.ts similarity index 76% rename from src/components/ShikijiLFHighlighter/shikijiloader.ts rename to src/components/ShikiLFHighlighter/shikiloader.ts index 2a64fccf6..99a53893c 100644 --- a/src/components/ShikijiLFHighlighter/shikijiloader.ts +++ b/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."); } }); } diff --git a/src/theme/CodeBlock/index.js b/src/theme/CodeBlock/index.js index c588c1a6a..1fc9ef724 100644 --- a/src/theme/CodeBlock/index.js +++ b/src/theme/CodeBlock/index.js @@ -1,6 +1,6 @@ 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 ( @@ -8,7 +8,7 @@ export default function CodeBlockWrapper(props) { {/* If using 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") ? ( - + ) : ( )} diff --git a/yarn.lock b/yarn.lock index 589c8d276..d52c3f292 100644 --- a/yarn.lock +++ b/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/core@1.5.1": + 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==