@sveltek/rehype-highlight

A custom Rehype plugin that creates code highlighter.

> [!NOTE]
>
> While the API is solid and mostly complete, some changes may still occur before the first stable release.
>
> Ideas, suggestions and code contributions are welcome.
>
> If you find any issues or bugs, please report them so the project can be improved.

Installation

``sh


via pnpm


pnpm add -D @sveltek/rehype-highlight
`

`sh


via npm


npm install -D @sveltek/rehype-highlight
`

Usage

$3

`ts
import { svelteMarkdown } from '@sveltek/markdown'
import { rehypeHighlight } from '@sveltek/rehype-highlight'

svelteMarkdown({
plugins: {
rehype: [[rehypeHighlight, options]],
},
})
`

$3

`ts
import { svelteMarkdown } from '@sveltek/markdown'
import { rehypeHighlight } from '@sveltek/rehype-highlight'

svelteMarkdown({
layouts: [
{
name: 'layout-name',
path: 'path/to/custom/file.svelte',
plugins: {
rehype: [[rehypeHighlight, options]],
},
},
],
})
`

$3

`ts
import { svelteMarkdown } from '@sveltek/markdown'
import { rehypeHighlight } from '@sveltek/rehype-highlight'

svelteMarkdown({
entries: [
{
name: 'entry-name',
path: 'path/to/custom/file.svelte',
plugins: {
rehype: [[rehypeHighlight, options]],
},
},
],
})
`

Options

$3

- Type: (data: HighlighterData) => Promise | string | undefined
- Required: true

Specifies custom syntax highlighter.

`ts
{
highlighter: async ({ lang, code, meta }) => {
const result = await codeToHtml(code, { lang })
return result
},
}
`

$3

- Type: (node: Hast.Element) => void
- Default: undefined

Specifies custom options for the root node (usually the

 tag).
`ts
{
  root: (node) => {
    node.tagName = 'div'
    node.properties.id = 'code-highlight'
    // ...
  }
}
``
License
Developed in 🇭🇷 Croatia, © Sveltek.
Released under the MIT license.