如何使用Prism.js在Gatsby中通过语法高亮显示转换HTML代码块

Question

我想将语法高亮显示应用于具有<code>标记的HTML内容；例如

<pre>
<code>
function hello () {
console.log("Hello!");
}
</code>
</pre>

Gatsby插件，如Gatsby-remark-prismjs，仅适用于Markdown文件。我正在尝试使用gatsby-node.js以编程方式生成页面。

Answer 1

您可以使用

import Prism from 'prismjs'
const Component = () => {
let code_example = `let myvar = 'hello'`
let html_example = Prism.highlight(code_example, Prism.languages.javascript, 'javascript{numberLines: true}')
//...
return (
<pre class="language-js">
<code class="language-js" dangerouslySetInnerHTML={{ __html: html_example }}></code>
</pre>
)
}

但我还不能在这里使用行号