feat: ECodeBlock line highlighting

Mokkapps · Mokkapps · commit 8f3fd2e052a4 · 2024-01-31T10:29:30.000+01:00
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" show-line-numbers />
+    <ECodeBlock style="padding: 20px;" :code="code" lang="typescript" theme="dracula" show-line-numbers :highlighted-lines="[4, 5]" />
   </Suspense>
   <ECodeInline>@vue-email/nuxt</ECodeInline>
   <iframe :srcdoc="email" />
diff --git a/src/components/ECodeBlock.ts b/src/components/ECodeBlock.ts
@@ -30,8 +30,16 @@ export default defineComponent({
       type: String,
       default: '#636E7B',
     },
+    lineHighlightingColor: {
+      type: String,
+      default: 'rgba(101, 117, 133, .16)',
+    },
+    highlightedLines: {
+      type: Array as PropType<number[]>,
+      default: () => [],
+    },
   },
-  async setup({ code, lang, theme, showLineNumbers, lineNumberColor }) {
+  async setup({ code, lang, theme, showLineNumbers, lineNumberColor, highlightedLines, lineHighlightingColor }) {
     const shiki = await getHighlighter({
       langs: [lang],
       themes: [theme],
@@ -42,6 +50,11 @@ export default defineComponent({
       lang,
       theme,
       transformers: [
+        {
+          code(node) {
+            node.properties.style = 'display: table; width: 100%;'
+          },
+        },
         {
           line(node, line) {
             node.properties.style = 'display: table-row; line-height: 1.5; height: 1.5em;'
@@ -52,7 +65,7 @@ export default defineComponent({
                 tagName: 'span',
                 properties: {
                   className: ['line-number'],
-                  style: `padding-right: 15px; color: ${lineNumberColor}`,
+                  style: `padding-left: 5px; padding-right: 15px; color: ${lineNumberColor}; user-select: none;`,
                 },
                 children: [
                   {
@@ -62,6 +75,9 @@ export default defineComponent({
                 ],
               })
             }
+
+            if (highlightedLines.includes(line))
+              node.properties.style += `background-color: ${lineHighlightingColor};`
           },
         },
       ],
