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

但我无法在此处使用行号