shikix-transformers

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

Install

npm i -D shikix-transformers

import {
   codeToHtml,
} from 'shikix'
import {
   transformerNotationDiff,
   // ...
} from 'shikix-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

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

will be transformed to

<!-- 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>

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

transformerNotationHighlight

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

transformerNotationFocus

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

transformerNotationErrorLevel

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

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 shikix.

transformerRemoveLineBreak

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

License

MIT