如何使用 Prism.js 在 Gatsby 中使用语法高亮转换 HTML 代码块？答案

【问题标题】：How to transform HTML code block in Gatsby with syntax highlighting using Prism.js?如何使用 Prism.js 在 Gatsby 中使用语法高亮转换 HTML 代码块？
【发布时间】：2018-08-06 15:30:18
【问题描述】：

我想对具有<code> 标签的 HTML 内容应用语法高亮；例如

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

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

【问题讨论】：

您可以将您的 sn-p 放入一个文件中，并使用 gatsby-source-filesystem 使用 onCreateNode 挂钩向某些文件添加其他字段。这对于较小的 sn-ps 可能没有意义。例如gist.github.com/sktt/a9fc3706aca3516157bfc07ea3b078a3，然后您可以使用 graphql 获取它
或者，使用 webpack 加载器将原始代码转换为格式化的 html，
我也想做这个。到目前为止我已经找到了这个：github.com/octalmage/jason.stallin.gs/blob/master/src/…

标签： gatsby prismjs

【解决方案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>
 )
}

但我无法在此处使用行号

【讨论】：