diff options
| -rw-r--r-- | frontend/app/components/Gaming/CodeBlock.tsx | 2 | ||||
| -rw-r--r-- | frontend/app/shiki.bundle.ts | 58 | ||||
| -rw-r--r-- | frontend/biome.json | 7 | ||||
| -rw-r--r-- | frontend/package-lock.json | 32 | ||||
| -rw-r--r-- | frontend/package.json | 2 |
5 files changed, 99 insertions, 2 deletions
diff --git a/frontend/app/components/Gaming/CodeBlock.tsx b/frontend/app/components/Gaming/CodeBlock.tsx index 0a9a2e5..36ccae1 100644 --- a/frontend/app/components/Gaming/CodeBlock.tsx +++ b/frontend/app/components/Gaming/CodeBlock.tsx @@ -1,5 +1,5 @@ import { useEffect, useState } from "react"; -import { codeToHtml } from "shiki"; +import { codeToHtml } from "../../shiki.bundle"; type Props = { code: string; diff --git a/frontend/app/shiki.bundle.ts b/frontend/app/shiki.bundle.ts new file mode 100644 index 0000000..1d03de3 --- /dev/null +++ b/frontend/app/shiki.bundle.ts @@ -0,0 +1,58 @@ +/* Generate by @shikijs/codegen */ +import type { + DynamicImportLanguageRegistration, + DynamicImportThemeRegistration, + HighlighterGeneric, +} from '@shikijs/types' +import { + createSingletonShorthands, + createdBundledHighlighter, +} from '@shikijs/core' +import { createJavaScriptRegexEngine } from '@shikijs/engine-javascript' + +type BundledLanguage = 'php' +type BundledTheme = 'github-light' +type Highlighter = HighlighterGeneric<BundledLanguage, BundledTheme> + +const bundledLanguages = { + php: () => import('@shikijs/langs/php'), +} as Record<BundledLanguage, DynamicImportLanguageRegistration> + +const bundledThemes = { + 'github-light': () => import('@shikijs/themes/github-light'), +} as Record<BundledTheme, DynamicImportThemeRegistration> + +const createHighlighter = /* @__PURE__ */ createdBundledHighlighter< + BundledLanguage, + BundledTheme +>({ + langs: bundledLanguages, + themes: bundledThemes, + engine: () => createJavaScriptRegexEngine(), +}) + +const { + codeToHtml, + codeToHast, + codeToTokensBase, + codeToTokens, + codeToTokensWithThemes, + getSingletonHighlighter, + getLastGrammarState, +} = /* @__PURE__ */ createSingletonShorthands<BundledLanguage, BundledTheme>( + createHighlighter, +) + +export { + bundledLanguages, + bundledThemes, + codeToHast, + codeToHtml, + codeToTokens, + codeToTokensBase, + codeToTokensWithThemes, + createHighlighter, + getLastGrammarState, + getSingletonHighlighter, +} +export type { BundledLanguage, BundledTheme, Highlighter } diff --git a/frontend/biome.json b/frontend/biome.json index 34ae968..54c8856 100644 --- a/frontend/biome.json +++ b/frontend/biome.json @@ -7,7 +7,12 @@ }, "files": { "ignoreUnknown": false, - "ignore": ["./.cache", "./build", "./app/api/schema.d.ts"] + "ignore": [ + "./.cache", + "./build", + "./app/api/schema.d.ts", + "./app/shiki.bundle.ts" + ] }, "formatter": { "enabled": true, diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 7bf15b3..d11f775 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -40,6 +40,7 @@ "eslint-plugin-react": "^7.37.4", "eslint-plugin-react-hooks": "^4.6.2", "openapi-typescript": "^7.6.1", + "shiki-codegen": "^3.1.0", "tailwindcss": "^4.0.12", "typescript": "^5.8.2", "vite": "^6.1.1", @@ -11889,6 +11890,37 @@ "@types/hast": "^3.0.4" } }, + "node_modules/shiki-codegen": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/shiki-codegen/-/shiki-codegen-3.1.0.tgz", + "integrity": "sha512-BWEZgaDZKk/ktT+ZPWWXel9hl2VLsB8y3vzRbMufd+nsDIyfpZSsUmQGBVPI/FSsmeOFQeTKDakWQt24hQTUFw==", + "dev": true, + "license": "MIT", + "dependencies": { + "cac": "^6.7.14", + "prettier": "^3.5.2", + "shiki": "3.1.0" + }, + "bin": { + "shiki-codegen": "bin.mjs" + } + }, + "node_modules/shiki-codegen/node_modules/prettier": { + "version": "3.5.3", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.3.tgz", + "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==", + "dev": true, + "license": "MIT", + "bin": { + "prettier": "bin/prettier.cjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/shiki/node_modules/@types/hast": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz", diff --git a/frontend/package.json b/frontend/package.json index 8dc65f0..eb046c1 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -11,6 +11,7 @@ "check:ts": "tsc", "dev": "remix vite:dev", "openapi-typescript": "openapi-typescript --output ./app/api/schema.d.ts ../openapi/api-server.yaml", + "shiki-codegen": "shiki-codegen --langs php --themes github-light --engine javascript ./app/shiki.bundle.ts", "start": "remix-serve ./build/server/index.js" }, "dependencies": { @@ -48,6 +49,7 @@ "eslint-plugin-react": "^7.37.4", "eslint-plugin-react-hooks": "^4.6.2", "openapi-typescript": "^7.6.1", + "shiki-codegen": "^3.1.0", "tailwindcss": "^4.0.12", "typescript": "^5.8.2", "vite": "^6.1.1", |