title: Use code-prettify with rendered content reactjs
body: <p>I am using reactjs to render post. In my post, I have some tag <code>&lt;code&gt;&lt;/code&gt;</code>. 
  So I want to display <code>code</code> for everyone easy to see.</p>
  
  <p>I render my post like this with reactjs.</p>
  
  <pre><code>&lt;div className="post-body" dangerouslySetInnerHTML={{
                      __html: this.state.post.content.rendered
                    }} /&gt;
  </code></pre>
  
  <p>I installed code-prettify from this.</p>
  
  <pre><code>https://www.npmjs.com/package/code-prettify
  </code></pre>
  
  <p>So how can I use <code>pretty-code</code> ?</p>
  
  <p>Here is my content render json:</p>
  
  <pre><code>"content": {
          "rendered": "&lt;p&gt;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.&lt;\/p&gt;\n&lt;h2&gt;I.List of conditional tags you can use in your Blogger theme.&lt;\/h2&gt;\n&lt;ol&gt;\n&lt;li style=\"list-style-type: none;\"&gt;\n&lt;ol&gt;\n&lt;li&gt;For Index page (Homepage, label pages and archive pages)\n&lt;div class=\"toolbar\"&gt;&lt;code class=\"prettyprint\"&gt;&amp;lt;b:if cond='data:blog.pageType == \"index\"'&amp;gt;&lt;br \/&gt;\n&amp;lt;\/b:if&amp;gt;&lt;\/code&gt;&lt;\/div&gt;\n&lt;\/li&gt;\n&lt;li&gt;\n&lt;div class=\"toolbar\"&gt;For posts&lt;\/div&gt;\n&lt;div class=\"toolbar\"&gt;&lt;code class=\"prettyprint\"&gt;&amp;lt;b:if cond='data:blog.pageType == \"index\"'&amp;gt;&lt;br \/&gt;\n&amp;lt;\/b:if&amp;gt;&lt;\/code&gt;&lt;\/div&gt;\n&lt;\/li&gt;\n&lt;li&gt;\n&lt;div class=\"toolbar\"&gt;For pages&lt;\/div&gt;\n&lt;div class=\"toolbar\"&gt;&lt;code class=\"prettyprint\"&gt;&amp;lt;b:if cond='data:blog.pageType == \"static_page\"'&amp;gt;&lt;br \/&gt;\n&amp;lt;\/b:if&amp;gt;&lt;\/code&gt;&lt;\/div&gt;\n&lt;\/li&gt;\n&lt;li&gt;\n&lt;div class=\"toolbar\"&gt;For archive pages&lt;\/div&gt;\n&lt;div class=\"toolbar\"&gt;&lt;code class=\"prettyprint\"&gt;&amp;lt;b:if cond='data:blog.pageType == \"archive\"'&amp;gt;&lt;br \/&gt;\n&amp;lt;\/b:if&amp;gt;&lt;\/code&gt;&lt;\/div&gt;\n&lt;\/li&gt;\n&lt;li&gt;\n&lt;div class=\"toolbar\"&gt;For homepage&lt;\/div&gt;\n&lt;div class=\"toolbar\"&gt;&lt;code class=\"prettyprint\"&gt;&amp;lt;b:if cond='data:blog.url == data:blog.homepageUrl'&amp;gt;&lt;br \/&gt;\n&amp;lt;\/b:if&amp;gt;&lt;\/code&gt;&lt;\/div&gt;\n&lt;\/li&gt;\n&lt;li&gt;\n&lt;div class=\"toolbar\"&gt;For specific url&lt;\/div&gt;\n&lt;div class=\"toolbar\"&gt;&lt;code class=\"prettyprint\"&gt;&amp;lt;b:if cond='data:blog.url == \"PUT_URL_HERE\"'&amp;gt;&lt;br \/&gt;\n&amp;lt;\/b:if&amp;gt;&lt;\/code&gt;&lt;\/div&gt;\n&lt;\/li&gt;\n&lt;li&gt;\n&lt;div class=\"toolbar\"&gt;For search page&lt;\/div&gt;\n&lt;div class=\"toolbar\"&gt;&lt;code class=\"prettyprint\"&gt;&amp;lt;b:if cond='data:blog.searchLabel'&amp;gt;&lt;br \/&gt;\n&amp;lt;\/b:if&amp;gt;&lt;\/code&gt;&lt;\/div&gt;\n&lt;\/li&gt;\n&lt;li&gt;\n&lt;div class=\"toolbar\"&gt;For error page&lt;\/div&gt;\n&lt;div class=\"toolbar\"&gt;&lt;code class=\"prettyprint\"&gt;&amp;lt;b:if cond='data:blog.pageType == \"error_page\"'&amp;gt;&lt;br \/&gt;\n&amp;lt;\/b:if&amp;gt;&lt;\/code&gt;&lt;\/div&gt;\n&lt;\/li&gt;\n&lt;\/ol&gt;\n&lt;\/li&gt;\n&lt;\/ol&gt;\n&lt;h2&gt;II. How to use?&lt;\/h2&gt;\n&lt;p&gt;You can use like this:&lt;br \/&gt;\nExample: In home page, I want to make a different style with other pages\/posts. I will use css inside conditional tags.&lt;br \/&gt;\n&lt;code class=\"prettyprint\"&gt;&lt;br \/&gt;\n&amp;lt;b:if cond='data:blog.url == data:blog.homepageUrl'&amp;gt;&lt;br \/&gt;\n&amp;lt;style&amp;gt;&lt;br \/&gt;\nbody {font-size:20px; background:#f1f1f1}&lt;br \/&gt;\n&amp;lt;\/style&amp;gt;&lt;br \/&gt;\n&amp;lt;script&amp;gt;&lt;br \/&gt;\n\/\/&amp;lt;![CDATA[&lt;br \/&gt;\n$('body').addClass('homepage')&lt;br \/&gt;\n\/\/]]&amp;gt;&lt;br \/&gt;\n&amp;lt;\/script&amp;gt;&lt;br \/&gt;\n&amp;lt;\/b:if&amp;gt;&lt;br \/&gt;\n&lt;\/code&gt;&lt;\/p&gt;\n&lt;p&gt;You also can use else if not homepage.&lt;\/p&gt;\n&lt;p&gt;&lt;code class=\"prettyprint\"&gt;&lt;br \/&gt;\n&amp;lt;b:if cond='data:blog.url == data:blog.homepageUrl'&amp;gt;&lt;br \/&gt;\n&amp;lt;style&amp;gt;&lt;br \/&gt;\nbody {font-size:20px; background:#f1f1f1}&lt;br \/&gt;\n&amp;lt;\/style&amp;gt;&lt;br \/&gt;\n&amp;lt;script&amp;gt;&lt;br \/&gt;\n\/\/&amp;lt;![CDATA[&lt;br \/&gt;\n$('body').addClass('homepage')&lt;br \/&gt;\n\/\/]]&amp;gt;&lt;br \/&gt;\n&amp;lt;\/script&amp;gt;&lt;\/code&gt;&lt;\/p&gt;\n&lt;p&gt;&amp;lt;b:else\/&amp;gt;&lt;br \/&gt;\n&amp;lt;!&amp;#8211; Code for other pages here &amp;#8211;&amp;gt;&lt;br \/&gt;\n&amp;lt;\/b:if&amp;gt;&lt;\/p&gt;\n",
          "protected": false
      },
  </code></pre>