Glow is a small, but powerful syntax highligher for web:
Glow is the default highlighter for Nue web framework and works there "out of the box". Here's how to use Glow as a standalone library:
bun i nue-glow
// import highlighter
import { glow } from 'nue-glow'
const code = '<h1>Hello, World</h1>'
// render code
const html = glow(code, { language: 'html', numbered: true })
console.info(html) // <code language="html">...</code>
-
numbered
is a boolean flag indicating whether line numbers should be rendered. -
language
tells Glow the language of the code. This is optional. When not provided, Glow attempts to guess the language. If you are formatting Markdown, the language parameter "md" must be given so that Glow can deal with all the special cases like "-" starts a new list item, instead of a deleted line.
<code language="html">...</code>
Here's how you integrate Glow to Marked:
import { marked } from 'marked'
import { glow } from 'nue-glow'
// setup a custom renderer for code blocks
const renderer = {
code(input, language) {
const html = glow(input, { language, numbered: true })
return `<pre>${ html }</pre>`
}
}
marked.use({ renderer })
// read Markdown with a Glow-formatted code block
const content = '...'
const html = marked.parse(content)