shikiji-transformers

Collective of common transformers for Shikiji, inspired by shiki-processor.

Install

npm i -D shikiji-transformers

import {
  codeToHtml,
} from 'shikiji'
import {
  transformerNotationDiff,
  // ...
} from 'shikiji-transformers'

const html = codeToHtml(code, {
  lang: 'ts',
  transformers: [
    transformerNotationDiff(),
    // ...
  ],
})

Transformers

transformerNotationDiff

Use [!code ++] and [!code --] to mark added and removed lines.

For example, the following code

```ts
export function foo() {
  console.log('hewwo') // [!code --]
  console.log('hello') // [!code ++]
}
```

will be transformed to

export function foo() {
  console.log('hewwo')
  console.log('hello')
}

<!-- Output (stripped of `style` attributes for clarity) -->
<pre class="shiki has-diff"> <!-- Notice `has-diff` -->
  <code>
    <span class="line"></span>
    <span class="line"><span>function</span><span>()</span><span></span><span>{</span></span>
    <span class="line diff remove">  <!-- Notice `diff` and `remove` -->
      <span></span><span>console</span><span>.</span><span>log</span><span>(</span><span>&#39;</span><span>hewwo</span><span>&#39;</span><span>) </span>
    </span>
    <span class="line diff add">  <!-- Notice `diff` and `add` -->
      <span></span><span>console</span><span>.</span><span>log</span><span>(</span><span>&#39;</span><span>hello</span><span>&#39;</span><span>) </span>
    </span>
    <span class="line"><span></span><span>}</span></span>
    <span class="line"><span></span></span>
  </code>
</pre>

transformerNotationHighlight

Use [!code highlight] to highlight a line (adding highlighted class).

export function foo() {
  console.log('Highlighted')
}

transformerNotationFocus

Use [!code focus] to focus a line (adding focused class).

export function foo() {
  console.log('Focused')
}

transformerNotationErrorLevel

Use [!code error], [!code warning], to mark a line with an error level (adding highlighted error, highlighted warning class).

export function foo() {
  console.error('Error')
  console.warn('Warning')
}

transformerRenderWhitespace

Render whitespaces (tabs and spaces) as individual spans, with classes tab and space.

With some CSS, you can make it look like this:

transformerCompactLineOptions

Support for shiki's lineOptions that is removed in shikiji.

transformerRemoveLineBreak

Remove line breaks between <span class="line">. Useful when you set display: block to .line in CSS.