{"componentChunkName":"component---src-templates-blog-template-js","path":"/with-code","result":{"data":{"site":{"siteMetadata":{"title":"Delog"}},"markdownRemark":{"html":"<h3>Code Highlighting</h3>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">import</span> React <span class=\"token keyword\">from</span> <span class=\"token string\">\"react\"</span>\n<span class=\"token keyword\">import</span> <span class=\"token punctuation\">{</span> Link<span class=\"token punctuation\">,</span> useStaticQuery<span class=\"token punctuation\">,</span> graphql <span class=\"token punctuation\">}</span> <span class=\"token keyword\">from</span> <span class=\"token string\">\"gatsby\"</span>\n<span class=\"token keyword\">import</span> Navigation <span class=\"token keyword\">from</span> <span class=\"token string\">\"../components/navigation\"</span>\n\n<span class=\"token keyword\">export</span> <span class=\"token keyword\">default</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\"><span class=\"token punctuation\">{</span> children <span class=\"token punctuation\">}</span></span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">const</span> data <span class=\"token operator\">=</span> <span class=\"token function\">useStaticQuery</span><span class=\"token punctuation\">(</span>\n    graphql<span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">\n      query {\n        site {\n          siteMetadata {\n            title\n          }\n        }\n      }\n    </span><span class=\"token template-punctuation string\">`</span></span>\n  <span class=\"token punctuation\">)</span>\n  <span class=\"token keyword\">return</span> <span class=\"token punctuation\">(</span>\n    <span class=\"token operator\">&lt;</span>div className<span class=\"token operator\">=</span><span class=\"token string\">\"site-wrapper\"</span><span class=\"token operator\">></span>\n      <span class=\"token operator\">&lt;</span>header className<span class=\"token operator\">=</span><span class=\"token string\">\"site-header\"</span><span class=\"token operator\">></span>\n        <span class=\"token operator\">&lt;</span>div className<span class=\"token operator\">=</span><span class=\"token string\">\"site-title\"</span><span class=\"token operator\">></span>\n          <span class=\"token operator\">&lt;</span>Link to<span class=\"token operator\">=</span><span class=\"token string\">\"/\"</span><span class=\"token operator\">></span><span class=\"token punctuation\">{</span>data<span class=\"token punctuation\">.</span>site<span class=\"token punctuation\">.</span>siteMetadata<span class=\"token punctuation\">.</span>title<span class=\"token punctuation\">}</span><span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>Link<span class=\"token operator\">></span>\n        <span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>div<span class=\"token operator\">></span>\n        <span class=\"token operator\">&lt;</span>Navigation <span class=\"token operator\">/</span><span class=\"token operator\">></span>\n      <span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>header<span class=\"token operator\">></span>\n      <span class=\"token punctuation\">{</span>children<span class=\"token punctuation\">}</span>\n    <span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>div<span class=\"token operator\">></span>\n  <span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span></code></pre></div>","frontmatter":{"date":"February 20, 2020","path":"/with-code","title":"Code with Syntax Highlighting with PrismJS","thumbnail":"/assets/image-2.jpg","metaDescription":null}}},"pageContext":{}}}