A custom Rehype plugin that creates code highlighter.
npm install @sveltek/rehype-highlightA 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.
``sh`via pnpm
pnpm add -D @sveltek/rehype-highlight
`sh`via npm
npm install -D @sveltek/rehype-highlight
`ts
import { svelteMarkdown } from '@sveltek/markdown'
import { rehypeHighlight } from '@sveltek/rehype-highlight'
svelteMarkdown({
plugins: {
rehype: [[rehypeHighlight, options]],
},
})
`
`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]],
},
},
],
})
`
`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]],
},
},
],
})
`
- Type: (data: HighlighterData) => Promisetrue
- Required:
Specifies custom syntax highlighter.
`ts`
{
highlighter: async ({ lang, code, meta }) => {
const result = await codeToHtml(code, { lang })
return result
},
}
- Type: (node: Hast.Element) => voidundefined
- Default:
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.