feat: ECodeBlock add option to show line numbers

Mokkapps · Mokkapps · commit 78824be5b478 · 2024-01-31T06:52:11.000+01:00
diff --git a/bin/vue-email.mjs b/bin/vue-email.mjs
diff --git a/playground/src/App.vue b/playground/src/App.vue
@@ -23,7 +23,7 @@ const tokens = await codeToThemedTokens('<div class="foo">bar</div>', {
 
 <template>
   <Suspense>
-    <ECodeBlock style="padding: 20px;" :code="code" lang="typescript" theme="dracula" />
+    <ECodeBlock style="padding: 20px;" :code="code" lang="typescript" theme="dracula" show-line-numbers />
   </Suspense>
   <ECodeInline>@vue-email/nuxt</ECodeInline>
   <iframe :srcdoc="email" />
diff --git a/src/components/ECodeBlock.ts b/src/components/ECodeBlock.ts
@@ -22,17 +22,49 @@ export default defineComponent({
       type: String,
       default: '',
     },
+    showLineNumbers: {
+      type: Boolean,
+      default: false,
+    },
+    lineNumberColor: {
+      type: String,
+      default: '#636E7B',
+    },
   },
-  async setup({ code, lang, theme }) {
+  async setup({ code, lang, theme, showLineNumbers, lineNumberColor }) {
     const shiki = await getHighlighter({
       langs: [lang],
       themes: [theme],
     })
 
     const themeColorBg = shiki.getTheme(theme).bg
-    const htmlCode = shiki.codeToThemedTokens(code, {
+    const html = shiki.codeToHtml(code, {
       lang,
       theme,
+      transformers: [
+        {
+          line(node, line) {
+            node.properties.style = 'display: table-row; line-height: 1.5; height: 1.5em;'
+
+            if (showLineNumbers) {
+              node.children.unshift({
+                type: 'element',
+                tagName: 'span',
+                properties: {
+                  className: ['line-number'],
+                  style: `padding-right: 15px; color: ${lineNumberColor}`,
+                },
+                children: [
+                  {
+                    type: 'text',
+                    value: `${line}`,
+                  },
+                ],
+              })
+            }
+          },
+        },
+      ],
     })
 
     return () =>
@@ -46,19 +78,9 @@ export default defineComponent({
         },
         tabindex: 0,
       }, [
-        h('code', null, [
-          ...htmlCode.map((line) => {
-            return h('span', { class: ['line'], style: {
-              display: 'table-row',
-              lineHeight: '1.5',
-              height: '1.5em',
-            } }, [
-              ...line.map((token) => {
-                return h('span', { style: { color: token.color } }, token.content)
-              }),
-            ])
-          }),
-        ]),
+        h('span', {
+          innerHTML: html,
+        }),
       ])
   },
 })
