feat: support ansi background color, fix #432

packages/core/src/code-to-hast.ts

@@ -274,6 +274,8 @@ function getTokenStyleObject(token: TokenStyles) {
   const styles: Record<string, string> = {}
   if (token.color)
     styles.color = token.color
+  if (token.bgColor)
+    styles['background-color'] = token.bgColor
   if (token.fontStyle) {
     if (token.fontStyle & FontStyle.Italic)
       styles['font-style'] = 'italic'

packages/core/src/code-to-tokens-ansi.ts

@@ -28,10 +28,15 @@ export function tokenizeAnsiWithTheme(
   return lines.map(line =>
     parser.parse(line[0]).map((token): ThemedToken => {
       let color: string
-      if (token.decorations.has('reverse'))
+      let bgColor: string | undefined
+      if (token.decorations.has('reverse')) {
         color = token.background ? colorPalette.value(token.background) : theme.bg
-      else
+        bgColor = token.foreground ? colorPalette.value(token.foreground) : theme.fg
+      }
+      else {
         color = token.foreground ? colorPalette.value(token.foreground) : theme.fg
+        bgColor = token.background ? colorPalette.value(token.background) : undefined
+      }
 
       color = applyColorReplacements(color, colorReplacements)
 
@@ -52,6 +57,7 @@ export function tokenizeAnsiWithTheme(
         content: token.value,
         offset: line[1], // TODO: more accurate offset? might need to fork ansi-sequence-parser
         color,
+        bgColor,
         fontStyle,
       }
     }),

packages/core/src/types.ts

@@ -626,6 +626,10 @@ export interface TokenStyles {
    * 6 or 8 digit hex code representation of the token's color
    */
   color?: string
+  /**
+   * 6 or 8 digit hex code representation of the token's background color
+   */
+  bgColor?: string
   /**
    * Font style of token. Can be None/Italic/Bold/Underline
    */

packages/shiki/test/ansi.test.ts

@@ -1,27 +1,33 @@
 /* eslint-disable no-irregular-whitespace */
 import { expect, it } from 'vitest'
 import {
-  getHighlighter,
+  codeToHtml,
 } from '../src'
 
 it('renders ansi to html', async () => {
-  const highlighter = await getHighlighter({ themes: ['monokai'] })
-
-  const out = highlighter.codeToHtml(` WARN  using --force I sure hope you know what you are doing
+  const out = await codeToHtml(` WARN  using --force I sure hope you know what you are doing
 Scope: all 6 workspace projects
 Lockfile is up to date, resolution step is skipped
 Packages: +952
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 Progress: resolved 952, reused 910, downloaded 42, added 952, done
 Done in 15.7s`, { theme: 'monokai', lang: 'ansi' })
 
-  expect(out).toMatchInlineSnapshot(`
-    "<pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code><span class="line"><span style="color:#333333"> WARN </span><span style="color:#F8F8F2"> using --force I sure hope you know what you are doing</span></span>
-    <span class="line"><span style="color:#F8F8F2">Scope: all 6 workspace projects</span></span>
-    <span class="line"><span style="color:#F8F8F2">Lockfile is up to date, resolution step is skipped</span></span>
-    <span class="line"><span style="color:#F8F8F2">Packages: </span><span style="color:#86B42B">+952</span></span>
-    <span class="line"><span style="color:#86B42B">++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></span>
-    <span class="line"><span style="color:#F8F8F2">Progress: resolved </span><span style="color:#F8F8F2">952</span><span style="color:#F8F8F2">, reused </span><span style="color:#F8F8F2">910</span><span style="color:#F8F8F2">, downloaded </span><span style="color:#F8F8F2">42</span><span style="color:#F8F8F2">, added </span><span style="color:#F8F8F2">952</span><span style="color:#F8F8F2">, done</span></span>
-    <span class="line"><span style="color:#F8F8F2">Done in 15.7s</span></span></code></pre>"
-  `)
+  expect(out).toMatchFileSnapshot('./out/ansi.html')
+})
+
+// https://github.com/shikijs/shiki/issues/432
+it('renders ansi with background', async () => {
+  const code = `
+❯ pnpm install --force
+ WARN  using --force I sure hope you know what you are doing
+Scope: all 6 workspace projects
+Lockfile is up to date, resolution step is skipped
+Packages: +1038
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+`.trim()
+
+  const out = await codeToHtml(code, { theme: 'monokai', lang: 'ansi' })
+
+  expect(out).toMatchFileSnapshot('./out/ansi-background.html')
 })