Added code-syntex-highlight in blog post

gatsby-config.js

@@ -75,6 +75,13 @@ module.exports = {
               maxWidth: 800,
             },
           },
+          {
+            resolve: `gatsby-remark-highlight-code`,
+            options: {
+              terminal: "carbon",
+              theme: "zenburn",
+            },
+          },
         ],
       },
     },

package.json

@@ -5,6 +5,7 @@
   "version": "1.0.0",
   "author": "Shuvo <[email protected]>",
   "dependencies": {
+    "@deckdeckgo/highlight-code": "^2.2.1",
     "bootstrap": "^4.5.3",
     "disqus-react": "^1.0.10",
     "font-awesome": "^4.7.0",
@@ -16,6 +17,7 @@
     "gatsby-plugin-offline": "^3.3.3",
     "gatsby-plugin-react-helmet": "^3.3.14",
     "gatsby-plugin-sharp": "^2.7.1",
+    "gatsby-remark-highlight-code": "^2.1.0",
     "gatsby-remark-images": "^3.5.1",
     "gatsby-source-filesystem": "^2.4.2",
     "gatsby-transformer-remark": "^2.9.2",

src/components/layout.js

@@ -1,14 +1,8 @@
-/**
- * Layout component that queries for data
- * with Gatsby's useStaticQuery component
- *
- * See: https://www.gatsbyjs.com/docs/use-static-query/
- */
-
-import React from "react"
+import React, { useEffect } from "react"
 import PropTypes from "prop-types"
 import { useStaticQuery, graphql } from "gatsby"
 import { Row, Col } from 'reactstrap'
+import { defineCustomElements as deckDeckGoHighlightElement } from "@deckdeckgo/highlight-code/dist/loader"
 
 import '../styles/main.css'
 
@@ -17,6 +11,11 @@ import Footer from "./footer"
 import Sidebar from "./sidebar"
 
 const Layout = ({ children, pageTitle, postAuthor, hideSidebar }) => {
+  useEffect( () => {
+
+  }, [])
+  deckDeckGoHighlightElement()
+
   const data = useStaticQuery(graphql`
     query SiteTitleQuery {
       site {

src/components/post.js

@@ -1,50 +1,52 @@
-import React from 'react'
-import { Link } from 'gatsby'
-import { Card, CardBody, CardText, CardTitle, CardSubtitle } from 'reactstrap'
-import Img from 'gatsby-image'
-import { slugify } from '../utils/utilityFunctions'
+import React from "react"
+import { Link } from "gatsby"
+import { Card, CardBody, CardText, CardTitle, CardSubtitle } from "reactstrap"
+import Img from "gatsby-image"
 
-const Post = (props) => {
-    const { title, path, date, body, image, tags } = props.post;
 
-    return (
-      <Card
-        className={`${props.noMargin ? "" : "mb-5"} ${
-          props.columnView ? "blog-card" : ""
-        }`}
-      >
-        <Link to={path}>
-          <Img className="card-img-top" fluid={image} />
-        </Link>
-        <CardBody>
-          <CardTitle tag="h5">
-            <Link to={path}>{title}</Link>
-          </CardTitle>
-          <CardSubtitle className="text-muted">{date}</CardSubtitle>
-          <hr />
-          <CardText>{body}</CardText>
+import { slugify } from "../utils/utilityFunctions"
 
-          <div className="d-flex align-items-center mt-auto flex-wrap">
-            <ul className="post-tags">
-              {tags.map((tag, i) => (
-                <li key={i}>
-                  <Link
-                    className="badge badge-default p-2 px-2 tag"
-                    to={`/tag/${slugify(tag)}`}
-                  >
-                    {tag}
-                  </Link>
-                </li>
-              ))}
-            </ul>
+const Post = props => {
+  const { title, path, date, body, image, tags } = props.post
 
-            <Link to={path} className="btn btn-outline-primary ml-auto">
-              Read Post
-            </Link>
-          </div>
-        </CardBody>
-      </Card>
-    )
+  return (
+    <Card
+      className={`${props.noMargin ? "" : "mb-5"} ${
+        props.columnView ? "blog-card" : ""
+      }`}
+    >
+      <Link to={path}>
+        <Img className="card-img-top" fluid={image} />
+      </Link>
+      <CardBody>
+        <CardTitle tag="h5">
+          <Link to={path}>{title}</Link>
+        </CardTitle>
+        <CardSubtitle className="text-muted">{date}</CardSubtitle>
+        <hr />
+        <CardText>{body}</CardText>
+
+        <div className="d-flex align-items-center mt-auto flex-wrap">
+          <ul className="post-tags">
+            {tags.map((tag, i) => (
+              <li key={i}>
+                <Link
+                  className="badge badge-default p-2 px-2 tag"
+                  to={`/tag/${slugify(tag)}`}
+                >
+                  {tag}
+                </Link>
+              </li>
+            ))}
+          </ul>
+
+          <Link to={path} className="btn btn-outline-primary ml-auto">
+            Read Post
+          </Link>
+        </div>
+      </CardBody>
+    </Card>
+  )
 }
 
 export default Post