feat(transformers): add transformerNotationDiffWord

docs/packages/transformers.md

@@ -150,6 +150,33 @@ console.log('goodbye')
 
 ---
 
+### `transformerNotationDiffWord`
+
+Use `[!code ++:text]` and `[!code --:text]` to mark added and removed text in the code.
+
+````md
+```ts
+// [\!code --:hello]
+// [\!code ++:hola]
+console.log('hello')
+```
+````
+
+Renders (with custom CSS rules):
+
+```ts
+// [!code --:hello]
+// [!code ++:hola]
+console.log('hello')
+```
+
+- `// [!code ++:text]` outputs: `<span class="diff add">text</span>`
+- `// [!code --:text]` outputs: `<span class="diff remove">text</span>`
+
+You can also specify the number of lines to highlight matched words on, similar to `transformerNotationWordHighlight`.
+
+---
+
 ### `transformerNotationHighlight`
 
 Use `[!code highlight]` to highlight a line.

packages/transformers/src/index.ts

@@ -4,6 +4,7 @@ export * from './transformers/compact-line-options'
 export * from './transformers/meta-highlight'
 export * from './transformers/meta-highlight-word'
 export * from './transformers/notation-diff'
+export * from './transformers/notation-diff-word'
 export * from './transformers/notation-error-level'
 export * from './transformers/notation-focus'
 export * from './transformers/notation-highlight'

packages/transformers/src/transformers/notation-diff-word.ts

@@ -0,0 +1,53 @@
+import type { ShikiTransformer, ShikiTransformerContext } from '@shikijs/core'
+import type { Element } from 'hast'
+import type { MatchAlgorithmOptions } from '../shared/notation-transformer'
+import { highlightWordInLine } from '../shared/highlight-word'
+import { createCommentNotationTransformer } from '../shared/notation-transformer'
+
+export interface TransformerNotationDiffWordOptions extends MatchAlgorithmOptions {
+  /**
+   * Class for added words
+   */
+  classActiveWordAdd?: string
+  /**
+   * Class for removed words
+   */
+  classActiveWordRemove?: string
+  /**
+   * Class added to the root element when the current code has diff
+   */
+  classActivePre?: string
+}
+
+export function transformerNotationDiffWord(
+  options: TransformerNotationDiffWordOptions = {},
+): ShikiTransformer {
+  const {
+    classActiveWordAdd = 'diff add',
+    classActiveWordRemove = 'diff remove',
+    classActivePre = 'has-diff',
+  } = options
+
+  return createCommentNotationTransformer(
+    '@shikijs/transformers:notation-diff-word',
+    // Matches: [!code ++:word] or [!code --:word] or [!code ++:word:1]
+    /\s*\[!code (\+\+|--):((?:\\.|[^:\]])+)(:\d+)?\]/,
+    function (this: ShikiTransformerContext, [_, type, word, range]: string[], _line: Element, comment: Element, lines: Element[], index: number) {
+      const lineNum = range ? Number.parseInt(range.slice(1), 10) : lines.length
+
+      // escape backslashes
+      word = word.replace(/\\(.)/g, '$1')
+      const className = type === '++' ? classActiveWordAdd : classActiveWordRemove
+
+      for (let i = index; i < Math.min(index + lineNum, lines.length); i++) {
+        highlightWordInLine.call(this, lines[i], comment, word, className)
+      }
+
+      if (classActivePre)
+        this.addClassToHast(this.pre, classActivePre)
+
+      return true
+    },
+    options.matchAlgorithm,
+  )
+}

packages/transformers/test/fixtures.test.ts

@@ -6,6 +6,7 @@ import { describe, expect, it } from 'vitest'
 import {
   transformerCompactLineOptions,
   transformerNotationDiff,
+  transformerNotationDiffWord,
   transformerNotationErrorLevel,
   transformerNotationFocus,
   transformerNotationHighlight,
@@ -88,6 +89,23 @@ body { margin: 0; }
 </style>`,
 )
 
+suite(
+  'diff-word',
+  import.meta.glob('./fixtures/diff-word/*.*', { query: '?raw', import: 'default', eager: true }),
+  [
+    transformerNotationDiffWord({ matchAlgorithm: 'v3' }),
+    transformerRemoveLineBreak(),
+  ],
+  code => `${code}
+<style>
+body { margin: 0; }
+.shiki { padding: 1.5em; }
+.line { display: block; width: 100%; height: 1.2em; }
+.diff.add { background-color: #0505; color: green; }
+.diff.remove { background-color: #8005; color: red; }
+</style>`,
+)
+
 suite(
   'focus',
   import.meta.glob('./fixtures/focus/*.*', { query: '?raw', import: 'default', eager: true }),

test/exports/@shikijs/transformers.yaml

@@ -7,6 +7,7 @@
   transformerMetaHighlight: function
   transformerMetaWordHighlight: function
   transformerNotationDiff: function
+  transformerNotationDiffWord: function
   transformerNotationErrorLevel: function
   transformerNotationFocus: function
   transformerNotationHighlight: function