gatsby - 如何使用 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>
 )
}

但我无法在这里使用行号