Как преобразовать блок кода HTML в Гэтсби с подсветкой синтаксиса с помощью Prism.js?

Question

Я хочу применить подсветку синтаксиса к контенту HTML, который имеет <code> тег; например

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

Плагины Gatsby, такие как gatsby -mark-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>
 )
}

Но я не смог использовать здесь номера строк