How to highlight the code block

[ZenkieBear]

I wrote a code block similar, remark just put it into a pre>code html structure.
The keywords are not highlight, how could I make it colorful like by using highlight.js or prismjs?

[wooorm]

You can use highlight.js or prism.
I’d recommend https://github.com/rehypejs/rehype-highlight

[ZenkieBear]

excusme, how to integrate remark and rehype-highlight?🙏

[wooorm]

We’ve got a lot of docs! You should read some. I recommend starting with https://github.com/unifiedjs/unified. Then the remark and rehype readmes.

Then, you specifically need https://github.com/remarkjs/remark-rehype

[ZenkieBear]

thanks, I'll follo this way

[ZenkieBear]

I did the highlight through the code fragement below:

  const file = await unified()
    .use(remarkParse)
    .use(remarkRehype)
    .use(rehypeDocument, {title: '👋🌍'})
    .use(rehypeFormat)
    .use(rehypeStringify)
    .use(rehypeHighlight)
    .process(await read(path.join('src/posts', 'test.md')))

It:

1. Parse Markdown by remark-parse
2. Turn markdown to HTML by remark-rehype
3. Add a <title> tag to the HTML content through remark-document
4. Formatting html style by rehype-format
5. Compile HAST(HTML Abstract Syntax Tree) to html string
6. Highlight html string, if there‘s any <code> tag

Now the result html look like this:

Every keywords is wrapped by a span with class named start with hljs-.

[ZenkieBear]

That's not enough, these classes are not styled.
Is there any highlight theme sets already exists, css sets, plugin or other tools...?

[wooorm]

yes, see the https://highlightjs.org website