Update code hgihlight to shiki

shafiqrbs · Nov 26, 2023 · e73c139 · e73c139
1 parent 4ce324a
commit e73c139
Show file tree

Hide file tree

Showing 6 changed files with 420 additions and 36 deletions.
diff --git a/components/ComponentCanvas/ComponentCanvas.tsx b/components/ComponentCanvas/ComponentCanvas.tsx
@@ -1,6 +1,6 @@
 import cx from 'clsx';
 import { useState } from 'react';
-import { CodeHighlightTabs } from "@mantine/code-highlight";
+import { CodeHighlightTabs } from "@mantinex/shiki";
 import { MantineThemeProvider, Box } from '@mantine/core';
 import { getCodeFileIcon } from '@mantinex/dev-icons';
 import * as UiComponents from '../../lib';
@@ -44,7 +44,7 @@ export function ComponentCanvas(props: UiComponent & { zIndex: number }) {
           </Box>
         ) : (
           <Box pos="relative">
-            <CodeHighlightTabs code={props.code} getFileIcon={getCodeFileIcon} />
+            <CodeHighlightTabs code={props.code as any} getFileIcon={getCodeFileIcon} />
           </Box>
         )}
       </div>

diff --git a/components/ComponentPage/ComponentPage.tsx b/components/ComponentPage/ComponentPage.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react';
 import Head from 'next/head';
 import { MantineThemeProvider, useMantineTheme } from '@mantine/core';
 import { getCodeFileIcon } from '@mantinex/dev-icons';
-import { CodeHighlightTabs } from "@mantine/code-highlight";
+import { CodeHighlightTabs } from "@mantinex/shiki";
 import * as UiComponents from '../../lib';
 import { ComponentPreview } from '../ComponentPreview/ComponentPreview';
 import { ComponentPreviewControls } from '../ComponentPreviewControls/ComponentPreviewControls';
@@ -59,7 +59,7 @@ export function ComponentPage({ data }: ComponentPageProps) {
           data={data}
         />
       ) : (
-        <CodeHighlightTabs code={data.code} getFileIcon={getCodeFileIcon} />
+        <CodeHighlightTabs code={data.code as any} getFileIcon={getCodeFileIcon} />
       )}
     </>
   );

diff --git a/data/components.ts b/data/components.ts
@@ -53,7 +53,7 @@ function getComponentCode(componentFolder: string, componentName: string) {
     { fileName: `${componentName}.tsx`, language: 'tsx', code: mainFileContent },
     ...otherFilesContent.map(({ name, content }) => ({
       fileName: name,
-      language: name.endsWith(".css") ? "css" : "tsx",
+      language: name.endsWith(".css") ? "scss" : "tsx",
       code: content,
     })),
   ];

diff --git a/package.json b/package.json
@@ -19,7 +19,6 @@
   "dependencies": {
     "@hello-pangea/dnd": "^16.3.0",
     "@mantine/carousel": "7.2.2",
-    "@mantine/code-highlight": "7.2.2",
     "@mantine/core": "7.2.2",
     "@mantine/dropzone": "7.2.2",
     "@mantine/form": "7.2.2",
@@ -29,13 +28,15 @@
     "@mantinex/mantine-header": "^1.0.1",
     "@mantinex/mantine-logo": "^1.0.1",
     "@mantinex/mantine-meta": "^1.0.1",
+    "@mantinex/shiki": "^1.0.2",
     "@next/bundle-analyzer": "^14.0.3",
     "@tabler/icons-react": "^2.41.0",
     "dayjs": "^1.11.10",
     "embla-carousel-react": "^7.1.0",
     "next": "14.0.3",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "shikiji": "^0.7.4"
   },
   "devDependencies": {
     "@babel/core": "^7.23.3",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,17 +1,27 @@
 import '../fonts/GreycliffCF/styles.css';
 import '@mantine/core/styles.css';
-import "@mantine/code-highlight/styles.css";
+import "@mantinex/shiki/styles.css";
 import '@mantine/carousel/styles.css';
 import '@mantine/dropzone/styles.css';
 import '@mantine/spotlight/styles.css';
 import '@mantinex/mantine-header/styles.css';
 import '@mantinex/mantine-logo/styles.css';
 import Head from 'next/head';
 import { MantineProvider, DirectionProvider, localStorageColorSchemeManager } from '@mantine/core';
+import { ShikiProvider } from '@mantinex/shiki';
 import { HotKeysHandler } from '@/components/HotKeysHandler';
 import { Search } from '@/components/Search';
 import { GaScript } from '@/components/GaScript';
 
+async function loadShiki() {
+  const { getHighlighter } = await import('shikiji');
+  const shiki = await getHighlighter({
+    langs: ['tsx', 'scss', 'html', 'bash', 'json'],
+  });
+
+  return shiki;
+}
+
 export default function App({ Component, pageProps }: any) {
   return (
     <>
@@ -39,9 +49,11 @@ export default function App({ Component, pageProps }: any) {
           defaultColorScheme="auto"
           colorSchemeManager={localStorageColorSchemeManager({ key: 'mantine-ui-color-scheme' })}
         >
-          <HotKeysHandler />
-          <Component {...pageProps} />
-          <Search data={pageProps.allComponents} />
+          <ShikiProvider loadShiki={loadShiki}>
+            <HotKeysHandler />
+            <Component {...pageProps} />
+            <Search data={pageProps.allComponents} />
+          </ShikiProvider>
         </MantineProvider>
       </DirectionProvider>
     </>