chore(site): highlight.js -> shiki (#2982)

jd-opensource · Mar 20, 2024 · 1936803 · 1936803
1 parent c1e5243
commit 1936803
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 96 deletions.
diff --git a/packages/nutui-vite-plugins/package.json b/packages/nutui-vite-plugins/package.json
@@ -31,12 +31,12 @@
   "license": "MIT",
   "dependencies": {
     "fs-extra": "^11.2.0",
-    "highlight.js": "^11.9.0",
     "lzutf8": "^0.6.3",
     "markdown-it-container": "^4.0.0",
     "unplugin-vue-markdown": "^0.26.0"
   },
   "devDependencies": {
+    "@shikijs/markdown-it": "^1.2.0",
     "@types/fs-extra": "^11.0.4",
     "@types/markdown-it-container": "^2.0.9",
     "tsup": "^8.0.2",

diff --git a/packages/nutui-vite-plugins/src/markdown.ts b/packages/nutui-vite-plugins/src/markdown.ts
@@ -1,6 +1,6 @@
 import Markdown from 'unplugin-vue-markdown/vite';
 import MarkdownIt from 'markdown-it-container';
-import hljs from 'highlight.js';
+import Shiki from '@shikijs/markdown-it';
 import LZUTF8 from 'lzutf8';
 import fs from 'fs-extra';
 import path from 'path';
@@ -60,17 +60,9 @@ export default function markdown(options: MarkdownOptions) {
     TransformMarkdownDemo(options),
     Markdown({
       markdownItOptions: {
-        typographer: false,
-        highlight: function (str, lang) {
-          if (lang && (lang === 'vue' || hljs.getLanguage(lang))) {
-            return hljs.highlight(str, {
-              language: lang === 'vue' ? 'html' : lang
-            }).value;
-          }
-          return '';
-        }
+        typographer: false
       },
-      markdownItSetup(md) {
+      markdownItSetup: async (md) => {
         md.use(MarkdownIt, 'demo', {
           validate: function (params: any) {
             return params.match(/^demo\s*(.*)$/);
@@ -87,6 +79,14 @@ export default function markdown(options: MarkdownOptions) {
             }
           }
         });
+        md.use(
+          await Shiki({
+            themes: {
+              light: 'github-light',
+              dark: 'github-dark'
+            }
+          })
+        );
       }
     })
   ];

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/sites/assets/styles/highlight.scss b/src/sites/assets/styles/highlight.scss
@@ -26,79 +26,3 @@ pre {
     margin-top: 20px;
   }
 }
-
-.hljs {
-  display: block;
-  padding: 30px;
-  overflow-x: auto;
-  background: #f7f8fa;
-}
-
-.hljs-comment,
-.hljs-quote {
-  color: #a0a1a7;
-  font-style: italic;
-}
-
-.hljs-doctag,
-.hljs-formula,
-.hljs-keyword {
-  color: #a626a4;
-}
-
-.hljs-deletion,
-.hljs-name,
-.hljs-section,
-.hljs-selector-tag,
-.hljs-subst {
-  color: #e45649;
-}
-
-.hljs-literal {
-  color: #0184bb;
-}
-
-.hljs-addition,
-.hljs-attribute,
-.hljs-meta-string,
-.hljs-regexp,
-.hljs-string {
-  color: #50a14f;
-}
-
-.hljs-built_in,
-.hljs-class .hljs-title {
-  color: #c18401;
-}
-
-.hljs-attr,
-.hljs-number,
-.hljs-selector-attr,
-.hljs-selector-class,
-.hljs-selector-pseudo,
-.hljs-template-variable,
-.hljs-type,
-.hljs-variable {
-  color: #986801;
-}
-
-.hljs-bullet,
-.hljs-link,
-.hljs-meta,
-.hljs-selector-id,
-.hljs-symbol,
-.hljs-title {
-  color: #4078f2;
-}
-
-.hljs-emphasis {
-  font-style: italic;
-}
-
-.hljs-strong {
-  font-weight: 700;
-}
-
-.hljs-link {
-  text-decoration: underline;
-}