如何通过Material-UI呈现具有javascript格式的代码段

时间:2019-05-18 18:49:10

标签: reactjs material-ui highlight.js

如何将文本格式化为javascript代码块(将React与Material-ui和Highlight.js结合使用)

我尝试过Google,但找不到任何示例

1 个答案:

答案 0 :(得分:1)

我发现此包装器在React:https://github.com/bvaughn/react-highlight.js中使用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。

Edit highlight