[英]Use code-prettify with rendered content reactjs
我正在使用reactjs渲染帖子。 在我的帖子中,我有一些標簽<code></code>
。 因此,我想為所有人顯示code
。
我用reactjs這樣渲染我的帖子。
<div className="post-body" dangerouslySetInnerHTML={{
__html: this.state.post.content.rendered
}} />
我從這里安裝了代碼修飾。
https://www.npmjs.com/package/code-prettify
那么如何使用pretty-code
?
這是我的內容渲染json:
"content": {
"rendered": "<p>In blogger\/blogspot you can you the conditional tags to make custom for posts, pages, archive page, label and search page, even a specific post.<\/p>\n<h2>I.List of conditional tags you can use in your Blogger theme.<\/h2>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li>For Index page (Homepage, label pages and archive pages)\n<div class=\"toolbar\"><code class=\"prettyprint\"><b:if cond='data:blog.pageType == \"index\"'><br \/>\n<\/b:if><\/code><\/div>\n<\/li>\n<li>\n<div class=\"toolbar\">For posts<\/div>\n<div class=\"toolbar\"><code class=\"prettyprint\"><b:if cond='data:blog.pageType == \"index\"'><br \/>\n<\/b:if><\/code><\/div>\n<\/li>\n<li>\n<div class=\"toolbar\">For pages<\/div>\n<div class=\"toolbar\"><code class=\"prettyprint\"><b:if cond='data:blog.pageType == \"static_page\"'><br \/>\n<\/b:if><\/code><\/div>\n<\/li>\n<li>\n<div class=\"toolbar\">For archive pages<\/div>\n<div class=\"toolbar\"><code class=\"prettyprint\"><b:if cond='data:blog.pageType == \"archive\"'><br \/>\n<\/b:if><\/code><\/div>\n<\/li>\n<li>\n<div class=\"toolbar\">For homepage<\/div>\n<div class=\"toolbar\"><code class=\"prettyprint\"><b:if cond='data:blog.url == data:blog.homepageUrl'><br \/>\n<\/b:if><\/code><\/div>\n<\/li>\n<li>\n<div class=\"toolbar\">For specific url<\/div>\n<div class=\"toolbar\"><code class=\"prettyprint\"><b:if cond='data:blog.url == \"PUT_URL_HERE\"'><br \/>\n<\/b:if><\/code><\/div>\n<\/li>\n<li>\n<div class=\"toolbar\">For search page<\/div>\n<div class=\"toolbar\"><code class=\"prettyprint\"><b:if cond='data:blog.searchLabel'><br \/>\n<\/b:if><\/code><\/div>\n<\/li>\n<li>\n<div class=\"toolbar\">For error page<\/div>\n<div class=\"toolbar\"><code class=\"prettyprint\"><b:if cond='data:blog.pageType == \"error_page\"'><br \/>\n<\/b:if><\/code><\/div>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<h2>II. How to use?<\/h2>\n<p>You can use like this:<br \/>\nExample: In home page, I want to make a different style with other pages\/posts. I will use css inside conditional tags.<br \/>\n<code class=\"prettyprint\"><br \/>\n<b:if cond='data:blog.url == data:blog.homepageUrl'><br \/>\n<style><br \/>\nbody {font-size:20px; background:#f1f1f1}<br \/>\n<\/style><br \/>\n<script><br \/>\n\/\/<![CDATA[<br \/>\n$('body').addClass('homepage')<br \/>\n\/\/]]><br \/>\n<\/script><br \/>\n<\/b:if><br \/>\n<\/code><\/p>\n<p>You also can use else if not homepage.<\/p>\n<p><code class=\"prettyprint\"><br \/>\n<b:if cond='data:blog.url == data:blog.homepageUrl'><br \/>\n<style><br \/>\nbody {font-size:20px; background:#f1f1f1}<br \/>\n<\/style><br \/>\n<script><br \/>\n\/\/<![CDATA[<br \/>\n$('body').addClass('homepage')<br \/>\n\/\/]]><br \/>\n<\/script><\/code><\/p>\n<p><b:else\/><br \/>\n<!– Code for other pages here –><br \/>\n<\/b:if><\/p>\n",
"protected": false
},
文檔非常清楚如何使用它,只需包含腳本並在pre
標簽中添加prettyprint
類
<pre class="prettyprint">
這是一個正在運行的示例:
const codeFromServer = `<code> function add(n1,n2){ console.log(x + y); } const x = 8; const y = 10; add(x,y); </code> `; class App extends React.Component{ render(){ return( <pre className="prettyprint" dangerouslySetInnerHTML={{ __html: codeFromServer }}></pre> ); } } ReactDOM.render(<App/>, document.getElementById('root'));
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root" />
正如Sagiv bg所提到的,有一種方法可以按需運行它,例如在頁面渲染上,如下面的代碼片段所示。 還演示了如何動態注入lib。
class CodePrettyComponent extends Component { static getHeadOrBody() { return document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]; } static codePrettify() { // Check if PR object already exists if (typeof PR !== 'undefined') { return; } // Inject if not CodePrettyComponent.getHeadOrBody().appendChild( Object.assign( document.createElement('script'), { type: 'text/javascript', async: true, src: 'https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js' } ) ); } componentDidMount() { // Injecting lib into document CodePrettyComponent.codePrettify(); // Waiting for lib to be loaded and invoke setTimeout(() => { PR.prettyPrint(); }, 1500); } render() { return ( <pre class = "prettyprint" > <code class = "language-groovy" > <!-- your code here --> </code> </pre> ); }; };
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
要在React中呈現HTML,請使用
html-to-react
。 使用parseWithInstructions()
您可以篩選出可能有風險的候選人。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.