reactjs - material-ui で JavaScript 形式のコード スニペットをレンダリングする方法

Question

テキストを JavaScript コード ブロックにフォーマットする方法 (React と material-ui および highlight.js を使用)

グーグルで検索してみましたが、例が見つかりません

Answer 1

highlight.jsReact 内で使用するためのこのラッパーを見つけました: 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 に入れているテーマを含める必要があります (例: )。