Usage

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

import { getHighlighter, createFocusProcessor } from 'shiki-processor'

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

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 { process, postProcess } from 'shiki-processor'

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

const highlighter = await getHighlighter({ theme })

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

return postProcess(processors, highlighted, lang)

Built-in processors

There is currently three processors: focus, diff and highlight. 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>

Optionally, a range can be defined by adding a colon and a number of lines: // [!code focus:3].