如何通过 material-ui 呈现 javascript 格式的代码片段

Question

如何将文本格式化为 javascript 代码块（将 React 与 material-ui 和 highlight.js 结合使用）

我试过 google 但找不到任何示例

Answer 1

我发现这个包装器用于在 React 中使用 highlight.js：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。

如何通过 material-ui 呈现 javascript 格式的代码片段

How to render a code snippet with javascript format by material-ui

reactjs

material-ui

highlight.js