fix(code-block): use span with \n instead of div for lines (#2008)

nuxt · Apr 17, 2023 · e946c42 · e946c42
1 parent c12c707
commit e946c42
Showing 1 changed file with 15 additions and 9 deletions.
diff --git a/src/runtime/transformers/shiki/highlighter.ts b/src/runtime/transformers/shiki/highlighter.ts
@@ -146,15 +146,21 @@ export const useShikiHighlighter = createSingleton((opts?: Exclude<ModuleOptions
     const lines = await getHighlightedTokens(code, lang, theme)
     const { highlights = [], colorMap = {} } = opts || {}
 
-    return lines.map((line, lineIndex) => ({
-      type: 'element',
-      tag: 'div',
-      props: {
-        class: ['line', highlights.includes(lineIndex + 1) ? 'highlight' : ''].join(' ').trim(),
-        line: lineIndex + 1
-      },
-      children: line.map(tokenSpan)
-    }))
+    return lines.map((line, lineIndex) => {
+      if (lineIndex !== lines.length - 1) {
+        line[line.length - 1].content += '\n'
+      }
+
+      return {
+        type: 'element',
+        tag: 'span',
+        props: {
+          class: ['line', highlights.includes(lineIndex + 1) ? 'highlight' : ''].join(' ').trim(),
+          line: lineIndex + 1
+        },
+        children: line.map(tokenSpan)
+      }
+    })
 
     function getColorProps (token: { color?: string | object }) {
       if (!token.color) {