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

# via pnpm
pnpm add -D @sveltek/rehype-highlight

# via npm
npm install -D @sveltek/rehype-highlight

Usage

Global

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

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

Layouts

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]],
      },
    },
  ],
})

Entries

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

highlighter

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

Specifies custom syntax highlighter.

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

root

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

Specifies custom options for the root node (usually the <pre> tag).

{
  root: (node) => {
    node.tagName = 'div'
    node.properties.id = 'code-highlight'
    // ...
  }
}

License

Developed in 🇭🇷 Croatia, © Sveltek.

Released under the MIT license.