plugin-shiki-transformers

Add transformer capabilities to Shiki's highlighter

npm i shiki plugin-shiki-transformers

Fork

Usage

plugin-shiki-transformers exports a custom getHighlighter that provides the same API as the one exported from shiki, except it adds a new transformers option.

import 'plugin-shiki-transformers/shiki.css'

import { getHighlighter, createTransformerFocus } from 'plugin-shiki-transformers'

const snippet = /** ... */
const highlighter = await getHighlighter({
  transformers: [
    createTransformerFocus(),
  ],
})

highlighter.codeToHtml(snippet, { lang: 'javascript' })

Alternatively, for more flexibility, it is possible to use the process and postProcess functions directly.

import { getHighlighter } from 'shiki'
import { transformer, postTransfomer } from 'plugin-shiki-transformers'

const theme = 'material-theme-palenight'
const lang = 'javascript'
const snippet = /** ... */
const transformers = [
  createTransformerFocus(),
]

const highlighter = await getHighlighter({ theme })

const { code, lineOptions } = transformer(transformers, snippet, lang)
const highlighted = highlighter.codeToHtml(code, {
	lang,
	theme,
	lineOptions,
})

return postTransfomer(transformers, highlighted, lang)

Built-in transformers

There is currently three transformers: focus, diff , highlight and error-level. Each one of them adds the possibility of adding a // [!code <tag>] annotation to a line in a code snipppet.

When this annotation is found, it is removed and a class corresponding to the processor is added to the line. The complete code block is also added a class.

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

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

plugin-shiki-transformers