Added syntax highlighting (#45)

Added syntax highlighting

gatsby-browser.js

@@ -5,6 +5,5 @@
  */
 
 // You can delete this file if you're not using it
-// require("prismjs/themes/prism.css");
+
-// require("prismjs/themes/prism-tomorrow.css");
+require('prismjs/themes/prism-tomorrow.css');
-// require("prismjs/plugins/line-numbers/prism-line-numbers.css");

gatsby-config.js

@@ -24,10 +24,7 @@ module.exports = {
       },
     },
     `gatsby-plugin-layout`,
-    {
+    `gatsby-transformer-remark`,
-      resolve: `gatsby-transformer-remark`,
-      plugins: [`gatsby-remark-prismjs`],
-    },
     {
       resolve: `gatsby-source-filesystem`,
       options: {
@@ -61,11 +58,8 @@ module.exports = {
         background_color: `#663399`,
         theme_color: `#ba1a2e`,
         display: `minimal-ui`,
-        icon: `src/images/icon.png`, // This path is relative to the root of the site.
+        icon: `src/images/icon.png`,
       },
     },
-    // this (optional) plugin enables Progressive Web App + Offline functionality
-    // To learn more, visit: https://gatsby.dev/offline
-    // `gatsby-plugin-offline`,
   ],
 }

package-lock.json

@@ -1735,6 +1735,12 @@
       "integrity": "sha512-MG7ExKBo7AQ5UrL1awyYLNinNM/kyXgE4iP4Ul9fB+T7n768Z5Xem8IZeP6Bna0xze8gkDly49Rgge2HOEw4xA==",
       "dev": true
     },
+    "@types/prismjs": {
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.16.0.tgz",
+      "integrity": "sha512-mEyuziLrfDCQ4juQP1k706BUU/c8OGn/ZFl69AXXY6dStHClKX4P+N8+rhqpul1vRDA2VOygzMRSJJZHyDEOfw==",
+      "dev": true
+    },
     "@types/prop-types": {
       "version": "15.7.1",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.1.tgz",
@@ -1748,7 +1754,8 @@
     "@types/ramda": {
       "version": "0.26.18",
       "resolved": "https://registry.npmjs.org/@types/ramda/-/ramda-0.26.18.tgz",
-      "integrity": "sha512-wK3NLaAkL/ht7Nw4IZsOagJuYqzZgoboFvILolOPtmoKyy25gTdz/uvB/bXsv6vdWENYv+ml5ph873P2d/+9HA=="
+      "integrity": "sha512-wK3NLaAkL/ht7Nw4IZsOagJuYqzZgoboFvILolOPtmoKyy25gTdz/uvB/bXsv6vdWENYv+ml5ph873P2d/+9HA==",
+      "dev": true
     },
     "@types/reach__router": {
       "version": "1.2.4",
@@ -4060,14 +4067,6 @@
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.0.tgz",
       "integrity": "sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ=="
     },
-    "comment-json": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/comment-json/-/comment-json-1.1.3.tgz",
-      "integrity": "sha1-aYbDMw/uDEyeAMI5jNYa+l2PI54=",
-      "requires": {
-        "json-parser": "^1.0.0"
-      }
-    },
     "common-tags": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.0.tgz",
@@ -5271,6 +5270,7 @@
       "version": "11.5.1",
       "resolved": "https://registry.npmjs.org/discord.js/-/discord.js-11.5.1.tgz",
       "integrity": "sha512-tGhV5xaZXE3Z+4uXJb3hYM6gQ1NmnSxp9PClcsSAYFVRzH6AJH74040mO3afPDMWEAlj8XsoPXXTJHTxesqcGw==",
+      "dev": true,
       "requires": {
         "long": "^4.0.0",
         "prism-media": "^0.0.3",
@@ -5282,7 +5282,8 @@
         "tweetnacl": {
           "version": "1.0.1",
           "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-1.0.1.tgz",
-          "integrity": "sha512-kcoMoKTPYnoeS50tzoqjPY3Uv9axeuuFAZY9M/9zFnhoVvRfxz9K29IMPD7jGmt2c8SW7i3gT9WqDl2+nV7p4A=="
+          "integrity": "sha512-kcoMoKTPYnoeS50tzoqjPY3Uv9axeuuFAZY9M/9zFnhoVvRfxz9K29IMPD7jGmt2c8SW7i3gT9WqDl2+nV7p4A==",
+          "dev": true
         }
       }
     },
@@ -8142,31 +8143,6 @@
         "warning": "^3.0.0"
       }
     },
-    "gatsby-remark-prismjs": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/gatsby-remark-prismjs/-/gatsby-remark-prismjs-3.3.3.tgz",
-      "integrity": "sha512-IQOv7b7w6c3+KsWju76Iezwme7o40Bov01czhSROcj41RkGSKDE38IAly2tZxTfpKNH1Hw8yDu6CivfEQiWzDg==",
-      "requires": {
-        "@babel/runtime": "^7.0.0",
-        "parse-numeric-range": "^0.0.2",
-        "unist-util-visit": "^1.3.0"
-      }
-    },
-    "gatsby-remark-vscode": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/gatsby-remark-vscode/-/gatsby-remark-vscode-1.0.6.tgz",
-      "integrity": "sha512-X3QhB9wZlFkdhtPLooH8DdxwcepL52h1mEN3MM6se1iKVZOM9W0JYExsinegcdrsbc/2c3QiZKQNb1fw9CUvEQ==",
-      "requires": {
-        "comment-json": "^1.1.3",
-        "decompress": "^4.2.0",
-        "lodash.escape": "^4.0.1",
-        "lodash.uniq": "^4.5.0",
-        "oniguruma": "^7.2.0",
-        "plist": "^3.0.1",
-        "unist-util-visit": "^1.4.0",
-        "vscode-textmate": "^4.1.0"
-      }
-    },
     "gatsby-source-filesystem": {
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/gatsby-source-filesystem/-/gatsby-source-filesystem-2.1.6.tgz",
@@ -9077,6 +9053,11 @@
       "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
       "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
     },
+    "highlight.js": {
+      "version": "9.15.9",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.15.9.tgz",
+      "integrity": "sha512-M0zZvfLr5p0keDMCAhNBp03XJbKBxUx5AfyfufMdFMEP4N/Xj6dh0IqC75ys7BAzceR34NgcvXjupRVaHBPPVQ=="
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -10338,21 +10319,6 @@
       "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
       "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw=="
     },
-    "json-parser": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/json-parser/-/json-parser-1.1.5.tgz",
-      "integrity": "sha1-5i7FJh0aal/CDoEqMgdAxtkAVnc=",
-      "requires": {
-        "esprima": "^2.7.0"
-      },
-      "dependencies": {
-        "esprima": {
-          "version": "2.7.3",
-          "resolved": "https://registry.npmjs.org/esprima/-/esprima-2.7.3.tgz",
-          "integrity": "sha1-luO3DVd59q1JzQMmc9HDEnZ7pYE="
-        }
-      }
-    },
     "json-schema": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
@@ -10834,11 +10800,6 @@
       "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
       "integrity": "sha1-0JF4cW/+pN3p5ft7N/bwgCJ0WAw="
     },
-    "lodash.escape": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-4.0.1.tgz",
-      "integrity": "sha1-yQRGkMIeBClL6qUXcS/e0fqI3pg="
-    },
     "lodash.escaperegexp": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.escaperegexp/-/lodash.escaperegexp-4.1.2.tgz",
@@ -11049,7 +11010,8 @@
     "long": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/long/-/long-4.0.0.tgz",
-      "integrity": "sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA=="
+      "integrity": "sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA==",
+      "dev": true
     },
     "longest": {
       "version": "1.0.1",
@@ -12127,14 +12089,6 @@
         "mimic-fn": "^1.0.0"
       }
     },
-    "oniguruma": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/oniguruma/-/oniguruma-7.2.0.tgz",
-      "integrity": "sha512-bh+ZLdykY1sdIx8jBp2zpLbVFDBc3XmKH4Ceo2lijNaN1WhEqtnpqFlmtCbRuDB17nJ58RAUStVwfW8e8uEbnA==",
-      "requires": {
-        "nan": "^2.14.0"
-      }
-    },
     "opentracing": {
       "version": "0.14.4",
       "resolved": "https://registry.npmjs.org/opentracing/-/opentracing-0.14.4.tgz",
@@ -12459,11 +12413,6 @@
         "unist-util-visit-children": "^1.0.0"
       }
     },
-    "parse-numeric-range": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/parse-numeric-range/-/parse-numeric-range-0.0.2.tgz",
-      "integrity": "sha1-tPCdQTx6282Yf26SM8e0shDJOOQ="
-    },
     "parse-passwd": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz",
@@ -12729,16 +12678,6 @@
         }
       }
     },
-    "plist": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/plist/-/plist-3.0.1.tgz",
-      "integrity": "sha512-GpgvHHocGRyQm74b6FWEZZVRroHKE1I0/BTjAmySaohK+cUn+hZpbqXkc3KWgW3gQYkqcQej35FohcT0FRlkRQ==",
-      "requires": {
-        "base64-js": "^1.2.3",
-        "xmlbuilder": "^9.0.7",
-        "xmldom": "0.1.x"
-      }
-    },
     "pngjs": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-3.4.0.tgz",
@@ -13595,7 +13534,8 @@
     "prism-media": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/prism-media/-/prism-media-0.0.3.tgz",
-      "integrity": "sha512-c9KkNifSMU/iXT8FFTaBwBMr+rdVcN+H/uNv1o+CuFeTThNZNTOrQ+RgXA1yL/DeLk098duAeRPP3QNPNbhxYQ=="
+      "integrity": "sha512-c9KkNifSMU/iXT8FFTaBwBMr+rdVcN+H/uNv1o+CuFeTThNZNTOrQ+RgXA1yL/DeLk098duAeRPP3QNPNbhxYQ==",
+      "dev": true
     },
     "prismjs": {
       "version": "1.17.1",
@@ -14063,6 +14003,14 @@
         "react-side-effect": "^1.1.0"
       }
     },
+    "react-highlight": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/react-highlight/-/react-highlight-0.12.0.tgz",
+      "integrity": "sha512-j04EWbYOFM0PryhF5Vvl0FDa/dD3M6q0Sl+nFN9kTvWQ9hFkfISNNs85+ssL4TSkDM+4pQTpMdxlDRi8yfIxjw==",
+      "requires": {
+        "highlight.js": "^9.11.0"
+      }
+    },
     "react-hot-loader": {
       "version": "4.12.9",
       "resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.12.9.tgz",
@@ -15249,7 +15197,8 @@
     "snekfetch": {
       "version": "3.6.4",
       "resolved": "https://registry.npmjs.org/snekfetch/-/snekfetch-3.6.4.tgz",
-      "integrity": "sha512-NjxjITIj04Ffqid5lqr7XdgwM7X61c/Dns073Ly170bPQHLm6jkmelye/eglS++1nfTWktpP6Y2bFXjdPlQqdw=="
+      "integrity": "sha512-NjxjITIj04Ffqid5lqr7XdgwM7X61c/Dns073Ly170bPQHLm6jkmelye/eglS++1nfTWktpP6Y2bFXjdPlQqdw==",
+      "dev": true
     },
     "socket.io": {
       "version": "2.2.0",
@@ -17255,14 +17204,6 @@
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.0.tgz",
       "integrity": "sha512-iq+S7vZJE60yejDYM0ek6zg308+UZsdtPExWP9VZoCFCz1zkJoXFnAX7aZfd/ZwrkidzdUZL0C/ryW+JwAiIGw=="
     },
-    "vscode-textmate": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/vscode-textmate/-/vscode-textmate-4.2.2.tgz",
-      "integrity": "sha512-1U4ih0E/KP1zNK/EbpUqyYtI7PY+Ccd2nDGTtiMR/UalLFnmaYkwoWhN1oI7B91ptBN8NdVwWuvyUnvJAulCUw==",
-      "requires": {
-        "oniguruma": "^7.2.0"
-      }
-    },
     "warning": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
@@ -18096,11 +18037,6 @@
       "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-9.0.7.tgz",
       "integrity": "sha1-Ey7mPS7FVlxVfiD0wi35rKaGsQ0="
     },
-    "xmldom": {
-      "version": "0.1.27",
-      "resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.1.27.tgz",
-      "integrity": "sha1-1QH5ezvbQDr4757MIFcxh6rawOk="
-    },
     "xmlhttprequest-ssl": {
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz",

package.json

@@ -17,8 +17,6 @@
     "gatsby-plugin-sharp": "^2.2.9",
     "gatsby-plugin-styled-components": "^3.1.2",
     "gatsby-plugin-typescript": "^2.1.2",
-    "gatsby-remark-prismjs": "^3.3.3",
-    "gatsby-remark-vscode": "^1.0.6",
     "gatsby-source-filesystem": "^2.1.6",
     "gatsby-transformer-remark": "^2.6.9",
     "gatsby-transformer-sharp": "^2.2.4",
@@ -27,11 +25,13 @@
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-helmet": "^5.2.1",
+    "react-highlight": "^0.12.0",
     "react-perfect-scrollbar": "^1.5.3",
     "styled-components": "^4.3.2"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "^1.4.0",
+    "@types/prismjs": "^1.16.0",
     "@types/ramda": "^0.26.18",
     "@types/react": "^16.8.23",
     "@types/react-dom": "^16.8.5",

src/components/Markdown/index.tsx

@@ -1,5 +1,10 @@
 import React from "react"
 import * as SC from "./styles"
+import Prism from "prismjs"
+import "prismjs/components/prism-python"
+import "prismjs/components/prism-markup-templating"
+import "prismjs/components/prism-php"
+import "prismjs/plugins/line-numbers/prism-line-numbers.css"
 
 interface MarkdownProps {
   content: string
@@ -13,6 +18,9 @@ export function Markdown({
   content,
   ...restProps
 }: MarkdownProps): JSX.Element {
+  React.useEffect(() => {
+    Prism.highlightAll()
+  }, [])
   return (
     <SC.MarkdownWrapper
       dangerouslySetInnerHTML={{ __html: content }}