feat: add handling for FontStyle.Strikethrough (#976)

Author: dhruvkb

docs/.vitepress/theme/transformers.css

@@ -22,3 +22,25 @@
   margin: -1px -3px;
   border-radius: 4px;
 }
+
+.vp-doc [class*='language-'] pre {
+  background-color: var(--shiki-light-bg, inherit);
+}
+
+.dark .vp-doc [class*='language-'] pre {
+  background-color: var(--shiki-dark-bg, inherit);
+}
+
+.vp-code,
+.vp-code span:not(.line.highlighted):not(.line.highlighted *) {
+  background-color: var(--shiki-light-bg, inherit);
+  text-decoration: var(--shiki-light-text-decoration, inherit);
+  font-weight: var(--shiki-light-font-weight, inherit);
+}
+
+.dark .vp-code,
+.dark .vp-code span:not(.line.highlighted):not(.line.highlighted *) {
+  background-color: var(--shiki-dark-bg, inherit);
+  text-decoration: var(--shiki-dark-text-decoration, inherit);
+  font-weight: var(--shiki-dark-font-weight, inherit);
+}

docs/languages.md

@@ -21,7 +21,7 @@ import { codeToHtml } from 'shiki'
 
 const html = codeToHtml('console.log("Hello World")', {
   lang: 'text', // [!code hl]
-  theme: 'vitesse-light', 
+  theme: 'vitesse-light',
 })
 ```
 
@@ -32,22 +32,15 @@ const html = codeToHtml('console.log("Hello World")', {
 A special processed language `ansi` is provided to highlight terminal outputs. For example:
 
 ```ansi
-┌  Welcome to VitePress!
-│
-◇  Where should VitePress initialize the config?
-│  ./docs
-│
-◇  Site title:
-│  My Awesome Project
-│
-◇  Site description:
-│  A VitePress Site
-│
-◆  Theme:
-│  ● Default Theme (Out of the box, good-looking docs)
-│  ○ Default Theme + Customization
-│  ○ Custom Theme
-└
+colored foreground
+colored background
+
+bold text
+dimmed text
+underlined text
+reversed text
+strikethrough text
+underlined + strikethrough text
 ```
 
 Check the [raw markdown of code snippet above](https://github.com/shikijs/shiki/blob/main/docs/languages.md?plain=1#L35).

packages/cli/src/code-to-ansi.ts

@@ -28,6 +28,8 @@ export async function codeToANSI(code: string, lang: BundledLanguage, theme: Bun
           text = c.italic(text)
         if (token.fontStyle & FontStyle.Underline)
           text = c.underline(text)
+        if (token.fontStyle & FontStyle.Strikethrough)
+          text = c.strikethrough(text)
       }
       output += text
     }

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

@@ -232,8 +232,11 @@ function mergeWhitespaceTokens(tokens: ThemedToken[][]): ThemedToken[][] {
     let carryOnContent = ''
     let firstOffset = 0
     line.forEach((token, idx) => {
-      const isUnderline = token.fontStyle && token.fontStyle & FontStyle.Underline
-      const couldMerge = !isUnderline
+      const isDecorated = token.fontStyle && (
+        (token.fontStyle & FontStyle.Underline)
+        || (token.fontStyle & FontStyle.Strikethrough)
+      )
+      const couldMerge = !isDecorated
       if (couldMerge && token.content.match(/^\s+$/) && line[idx + 1]) {
         if (!firstOffset)
           firstOffset = token.offset

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

@@ -57,6 +57,9 @@ export function tokenizeAnsiWithTheme(
       if (token.decorations.has('underline'))
         fontStyle |= FontStyle.Underline
 
+      if (token.decorations.has('strikethrough'))
+        fontStyle |= FontStyle.Strikethrough
+
       return {
         content: token.value,
         offset: line[1], // TODO: more accurate offset? might need to fork ansi-sequence-parser

packages/core/src/utils/tokens.ts

@@ -116,8 +116,13 @@ export function getTokenStyleObject(token: TokenStyles): Record<string, string>
       styles['font-style'] = 'italic'
     if (token.fontStyle & FontStyle.Bold)
       styles['font-weight'] = 'bold'
+    const decorations = []
     if (token.fontStyle & FontStyle.Underline)
-      styles['text-decoration'] = 'underline'
+      decorations.push('underline')
+    if (token.fontStyle & FontStyle.Strikethrough)
+      decorations.push('line-through')
+    if (decorations.length)
+      styles['text-decoration'] = decorations.join(' ')
   }
   return styles
 }