使用 Prismjs 在设计系统中显示代码片段。
我想将 html 代码示例分离到一个独立文件中并将其导入我的组件中。
代码示例组件:
CodeSampleContainer.jsx
import React, { Component } from 'react';
import Prism from "prismjs";
import './CodeSample.scss';
import '../Shared/prism.css';
// Import separate html file
import { html } './htmlSnippet.jsx';
class CodeSample extends Component {
hasHtmlBlob() {
return (
<pre>
<code className="language-html">
{html} // Any html displayed here will be highlighted by prism
</code>
</pre>
)
}
}
render() {
return (
<div className="CodeSample">
{this.hasHtmlBlob()}
</div>
)
}
}
我要导出的 HTML:
htmlSnippet.jsx
const html = `
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>`
return html;