title: gatsby-remark-prismjs is not working on html
body: <p>gatsby-remark-prismjs is not working on my settings.</p>
  
  <p>I'm trying to highlighting codes like javascript and swift.</p>
  
  <p>My blog contents fetched from wordpress.com</p>
  
  <p><a href="https://i.stack.imgur.com/om00K.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/om00K.png" alt="enter image description here"></a></p>
  
  <p>Here is my gatsby.config.js</p>
  
  <pre><code>,
        {
          resolve: `gatsby-transformer-remark`,
          options: {
            plugins: [
              {
                resolve: `gatsby-remark-prismjs`,
                options: {
                  // Class prefix for &lt;pre&gt; tags containing syntax highlighting;
                  // defaults to 'language-' (eg &lt;pre class="language-js"&gt;).
                  // If your site loads Prism into the browser at runtime,
                  // (eg for use with libraries like react-live),
                  // you may use this to prevent Prism from re-processing syntax.
                  // This is an uncommon use-case though;
                  // If you're unsure, it's best to use the default value.
                  classPrefix: "language-",
                  // This is used to allow setting a language for inline code
                  // (i.e. single backticks) by creating a separator.
                  // This separator is a string and will do no white-space
                  // stripping.
                  // A suggested value for English speakers is the non-ascii
                  // character '›'.
                  inlineCodeMarker: null,
                  // This lets you set up language aliases.  For example,
                  // setting this to '{ sh: "bash" }' will let you use
                  // the language "sh" which will highlight using the
                  // bash highlighter.
                  aliases: {},
                  // This toggles the display of line numbers alongside the code.
                  // To use it, add the following line in src/layouts/index.js
                  // right after importing the prism color scheme:
                  //  `require("prismjs/plugins/line-numbers/prism-line-numbers.css");`
                  // Defaults to false.
                  showLineNumbers: false,
                  // If setting this to true, the parser won't handle and highlight inline
                  // code used in markdown i.e. single backtick code like `this`.
                  noInlineHighlight: false,
                },
              },
              ],
            },
        },
  </code></pre>
  
  <p>gatsby.browser.js</p>
  
  <p><code>require("prismjs/themes/prism-okaidia.css")</code></p>
  
  <p>And It is index.js</p>
  
  <pre><code>import React, { Component } from 'react'
  import { Link } from 'gatsby'
  import Layout from "../layouts"
  import Headline from '../components/headline'
  import "../styles/main.scss"
  import { redirectTo } from '@reach/router'
  import { graphql } from 'gatsby'
  
  class IndexPage extends Component {
    render() {
      const data = this.props.data.wordpressPage
      var codeTest = `
        var _self = (typeof window !== 'undefined')
      ? window   // if in browser
      : (
        (typeof WorkerGlobalScope !== 'undefined' &amp;&amp; self instanceof WorkerGlobalScope)
        ? self // if in worker
        : {}   // if in node js
      );
      `
      var swift = `
        let test = "hellow"
        func test() -&gt; Bool {
          return false
        }
      `
      return (
        &lt;Layout&gt;
        &lt;Headline title={"I'm Shawn Baek"} subTitle={"iOS Developer"}/&gt;
        &lt;div
           style={{
             margin: '0 auto',
             maxWidth: 800,
             padding: '0px 1.0875rem 1.45rem',
             paddingTop: '1.45rem',
           }}
        &gt;
        &lt;div&gt;
            &lt;h1 style={{color:'rgb(76, 76, 76)'}}&gt;{data.title}&lt;/h1&gt;
            &lt;div style={{color:'rgb(76, 76, 76)'}} dangerouslySetInnerHTML={{ __html: data.content }}&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;pre className="javascript"&gt;
            &lt;code &gt;
                {codeTest}
            &lt;/code&gt;
        &lt;/pre&gt;
        &lt;pre className="language-swift"&gt;
            &lt;code &gt;
                {swift}
            &lt;/code&gt;
        &lt;/pre&gt;
        &lt;/div&gt;
      &lt;/Layout&gt;
      )
    }
  }
  
  export const IndexPageQuery = graphql`
    query IndexPageQuery {
      wordpressPage(slug: { eq: "about" }) {
        title
        content
        date(formatString: "MMMM DD, YYYY")
      }
    }
  `
  export default IndexPage
  </code></pre>
  
  <p>As you can see, PrismJS theme background color and font color is works. But syntax highlighting is not works like a token.</p>