Использовать код-prettify с отображаемым содержимым реагировать - PullRequest
Новая
       10

Использовать код-prettify с отображаемым содержимым реагировать

0 голосов
/ 22 декабря 2018

Я использую реагирование для отображения поста.В моем посте у меня есть тег <code>.Поэтому я хочу вывести на экран code для всех, кого легко увидеть.

Я вывожу свой пост таким образом с помощьюactjs. 

<div className="post-body" dangerouslySetInnerHTML={{
                    __html: this.state.post.content.rendered
                  }} />

Я установил код-prettify из этого. 

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\">&lt;b:if cond='data:blog.pageType == \"index\"'&gt;<br \/>\n&lt;\/b:if&gt;<\/code><\/div>\n<\/li>\n<li>\n<div class=\"toolbar\">For posts<\/div>\n<div class=\"toolbar\"><code class=\"prettyprint\">&lt;b:if cond='data:blog.pageType == \"index\"'&gt;<br \/>\n&lt;\/b:if&gt;<\/code><\/div>\n<\/li>\n<li>\n<div class=\"toolbar\">For pages<\/div>\n<div class=\"toolbar\"><code class=\"prettyprint\">&lt;b:if cond='data:blog.pageType == \"static_page\"'&gt;<br \/>\n&lt;\/b:if&gt;<\/code><\/div>\n<\/li>\n<li>\n<div class=\"toolbar\">For archive pages<\/div>\n<div class=\"toolbar\"><code class=\"prettyprint\">&lt;b:if cond='data:blog.pageType == \"archive\"'&gt;<br \/>\n&lt;\/b:if&gt;<\/code><\/div>\n<\/li>\n<li>\n<div class=\"toolbar\">For homepage<\/div>\n<div class=\"toolbar\"><code class=\"prettyprint\">&lt;b:if cond='data:blog.url == data:blog.homepageUrl'&gt;<br \/>\n&lt;\/b:if&gt;<\/code><\/div>\n<\/li>\n<li>\n<div class=\"toolbar\">For specific url<\/div>\n<div class=\"toolbar\"><code class=\"prettyprint\">&lt;b:if cond='data:blog.url == \"PUT_URL_HERE\"'&gt;<br \/>\n&lt;\/b:if&gt;<\/code><\/div>\n<\/li>\n<li>\n<div class=\"toolbar\">For search page<\/div>\n<div class=\"toolbar\"><code class=\"prettyprint\">&lt;b:if cond='data:blog.searchLabel'&gt;<br \/>\n&lt;\/b:if&gt;<\/code><\/div>\n<\/li>\n<li>\n<div class=\"toolbar\">For error page<\/div>\n<div class=\"toolbar\"><code class=\"prettyprint\">&lt;b:if cond='data:blog.pageType == \"error_page\"'&gt;<br \/>\n&lt;\/b:if&gt;<\/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&lt;b:if cond='data:blog.url == data:blog.homepageUrl'&gt;<br \/>\n&lt;style&gt;<br \/>\nbody {font-size:20px; background:#f1f1f1}<br \/>\n&lt;\/style&gt;<br \/>\n&lt;script&gt;<br \/>\n\/\/&lt;![CDATA[<br \/>\n$('body').addClass('homepage')<br \/>\n\/\/]]&gt;<br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/b:if&gt;<br \/>\n<\/code><\/p>\n<p>You also can use else if not homepage.<\/p>\n<p><code class=\"prettyprint\"><br \/>\n&lt;b:if cond='data:blog.url == data:blog.homepageUrl'&gt;<br \/>\n&lt;style&gt;<br \/>\nbody {font-size:20px; background:#f1f1f1}<br \/>\n&lt;\/style&gt;<br \/>\n&lt;script&gt;<br \/>\n\/\/&lt;![CDATA[<br \/>\n$('body').addClass('homepage')<br \/>\n\/\/]]&gt;<br \/>\n&lt;\/script&gt;<\/code><\/p>\n<p>&lt;b:else\/&gt;<br \/>\n&lt;!&#8211; Code for other pages here &#8211;&gt;<br \/>\n&lt;\/b:if&gt;<\/p>\n",
        "protected": false
    },

1 Ответ

0 голосов
/ 22 декабря 2018

Документы достаточно понятны, как их использовать, просто включите скрипт и добавьте класс prettyprint к тегу pre 

<pre class="prettyprint">

пример: 

const codeFromServer = `
function add(n1,n2){
  console.log(x + y);
}

const x = 8;
const y = 10;

add(x,y);

`;

class App extends React.Component{
  render(){
    return(
);}} ReactDOM.render (, 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" />
...