fix: updates shiki configs to display code snippets

igorMSoares · igorMSoares · commit ffbdf4f3b578 · 2024-07-07T01:20:43.000-03:00
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 node_modules
-dist
+dist
+cache
diff --git a/docs/.vitepress/components/CodeSnippet.vue b/docs/.vitepress/components/CodeSnippet.vue
@@ -1,5 +1,5 @@
 <script setup>
-  import { getHighlighter, setCDN } from 'shiki';
+  import { getHighlighter } from 'shiki';
   import { onMounted } from 'vue';
 
   const props = defineProps({
@@ -18,41 +18,42 @@
     highlight = [],
   } = props;
 
-  onMounted(() => {
-    setCDN('https://unpkg.com/shiki/');
+  onMounted(async () => {
     // @ts-ignore
-    getHighlighter({ theme: 'material-theme-palenight', langs: langs }).then(
-      highlighter => {
-        let lineOptions = [];
-        highlight.forEach(lineNumber => {
-          if (typeof lineNumber === 'string') {
-            const range = lineNumber.match(/\d+/g);
-            if (range) {
-              for (let i = +range[0]; i <= +range[1]; i++) {
-                lineOptions.push({
-                  line: i,
-                  classes: ['highlighted'],
-                });
-              }
-            }
-          } else if (typeof lineNumber === 'number') {
+    const highlighter = await getHighlighter({ theme: 'material-theme-palenight', langs: langs });
+
+    await highlighter.loadTheme('material-theme-palenight')
+    await highlighter.loadLanguage('javascript')
+
+    let lineOptions = [];
+    highlight.forEach(lineNumber => {
+      if (typeof lineNumber === 'string') {
+        const range = lineNumber.match(/\d+/g);
+        if (range) {
+          for (let i = +range[0]; i <= +range[1]; i++) {
             lineOptions.push({
-              line: lineNumber,
+              line: i,
               classes: ['highlighted'],
             });
           }
+        }
+      } else if (typeof lineNumber === 'number') {
+        lineOptions.push({
+          line: lineNumber,
+          classes: ['highlighted'],
         });
+      }
+    });
 
-        const snippet = highlighter.codeToHtml(code, {
-          lang: lang,
-          lineOptions: lineOptions,
-        });
+    const snippet = highlighter.codeToHtml(code, {
+      theme: 'material-theme-palenight',
+      lang: lang,
+      lineOptions: lineOptions,
+    });
 
-        // @ts-ignore
-        document.querySelector(`#${snippetId} .shiki-code`).innerHTML = snippet;
-        document.querySelector(`#${snippetId} pre`)?.removeAttribute('style');
-      }
-    );
+    // @ts-ignore
+    document.querySelector(`#${snippetId} .shiki-code`).innerHTML = snippet;
+    document.querySelector(`#${snippetId} pre`)?.removeAttribute('style');
   });
 </script>
 
diff --git a/docs/.vitepress/components/Example.vue b/docs/.vitepress/components/Example.vue
@@ -142,11 +142,10 @@
 <template>
   <Container>
     <h3 :id="titleId()" class="title">{{ title }}</h3>
-    <a
-      href="#"
+    <p
       class="customize--anchor"
       :class="`customize--anchor__${animationName}`"
-      >Customize this animation</a
+      >Customize this animation</p
     >
     <div>
       <AnimationForm
@@ -203,5 +202,10 @@
   .customize--anchor {
     display: flex;
     justify-content: right;
+    color: #42b883;
+  }
+
+  .customize--anchor:hover {
+    text-decoration: underline;
   }
 </style>

-Original file line number
+Diff line change
@@ @@ -1,2 +1,3 @@ @@
 node_modules
 -dist
 +dist
 +cache