fix(website): use correct lang for code highlightning

cschroeter · Nov 30, 2024 · 91576d6 · 91576d6
1 parent fd08383
commit 91576d6
Show file tree

Hide file tree

Showing 7 changed files with 11 additions and 9 deletions.
diff --git a/website/src/components/docs/component-playground.tsx b/website/src/components/docs/component-playground.tsx
@@ -31,7 +31,7 @@ export const ComponentPlayground = async () => {
           }),
         ),
         Effect.flatMap((code) =>
-          Effect.promise(() => highlight(code, framework)).pipe(
+          Effect.promise(() => highlight(code, framework === 'vue' ? 'vue' : 'tsx')).pipe(
             Effect.map((html) => ({
               code,
               html,

diff --git a/website/src/components/docs/installation-guide.tsx b/website/src/components/docs/installation-guide.tsx
@@ -9,7 +9,7 @@ export const InstallationGuide = async () => {
   const { component } = getServerContext()
 
   const code = `npx @park-ui/cli components add ${component}`
-  const html = await highlight(code)
+  const html = await highlight(code, 'bash')
 
   return (
     <Tabs.Root defaultValue="cli">

diff --git a/website/src/components/docs/manual-installation-guide.tsx b/website/src/components/docs/manual-installation-guide.tsx
@@ -47,7 +47,9 @@ export const ManualIntallationGuide = async () => {
           pipe(
             Effect.forEach(component.variants, (variant) =>
               pipe(
-                Effect.promise(() => highlight(variant.content)),
+                Effect.promise(() =>
+                  highlight(variant.content, framework === 'vue' ? 'vue' : 'tsx'),
+                ),
                 Effect.map((html) => ({
                   file: variant.file,
                   label: framework,

diff --git a/website/src/components/docs/recipe.tsx b/website/src/components/docs/recipe.tsx
@@ -17,7 +17,7 @@ export const Recipe = async () => {
     }),
     Effect.catchAll(() => Effect.succeed('Not yet available')),
     Effect.flatMap((code) =>
-      Effect.promise(() => highlight(code)).pipe(
+      Effect.promise(() => highlight(code, 'ts')).pipe(
         Effect.map((html) => ({
           code,
           html,

diff --git a/website/src/components/theming/theme-config-dialog.tsx b/website/src/components/theming/theme-config-dialog.tsx
@@ -16,7 +16,7 @@ export const ThemeConfigDialog = () => {
 
   useEffect(() => {
     const highlightConfig = async () => {
-      const html = await highlight(getConfig())
+      const html = await highlight(getConfig(), 'ts')
       setHtml(html)
     }
     highlightConfig()

diff --git a/website/src/components/ui/pre.tsx b/website/src/components/ui/pre.tsx
@@ -11,7 +11,7 @@ export const Pre = async (props: PropsWithChildren) => {
   const rawCode = props.children?.props.children.toString() as string
 
   const hasPreview = rawCode.startsWith('// live')
-  const html = await highlight(rawCode)
+  const html = await highlight(rawCode, lang)
   const code = rawCode.replace('// live', '').trim()
 
   return (

diff --git a/website/src/lib/shiki.ts b/website/src/lib/shiki.ts
@@ -2,11 +2,11 @@ import { createHighlighter } from 'shiki'
 
 const highlighter = createHighlighter({
   themes: ['github-dark-default'],
-  langs: ['vue', 'tsx'],
+  langs: ['vue', 'tsx', 'bash', 'json', 'txt'],
 })
 
-export const highlight = async (code: string, framework?: string) =>
+export const highlight = async (code: string, lang: string) =>
   (await highlighter).codeToHtml(code, {
-    lang: framework === 'vue' ? 'vue' : 'tsx',
+    lang,
     theme: 'github-dark-default',
   })