Как сделать фрагмент кода в формате javascript с помощью material-ui

Question

как отформатировать текст в кодовом блоке javascript (используя React с material-ui и highlight.js)

Я пытался Google, но не могу найти пример

Answer 1

Я нашел эту оболочку для использования highlight.js в React: https://github.com/bvaughn/react-highlight.js.

Вот простой пример:

import React from "react";
import ReactDOM from "react-dom";

import Highlight from "react-highlight.js";
function App() {
  return (
    <Highlight language="javascript">
      {`const rootElement = document.getElementById("root"); 
ReactDOM.render(<App />, rootElement);`}
    </Highlight>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Требуется также включить тему (например, <link rel='stylesheet' href='https://highlightjs.org/static/demo/styles/railscasts.css' />), которую я поместил в index.html в примере.