plugin-shiki-transformers
v0.0.9
Published
Add transformers capabilities to Shiki's highlighter
Downloads
4
Readme
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>'</span><span>hewwo</span><span>'</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>'</span><span>hello</span><span>'</span><span>) </span>
</span>
<span class="line"><span></span><span>}</span></span>
<span class="line"><span></span></span>
</code>
</pre>