Added syntax highlighting (#45)

Added syntax highlighting
2026-09-04 09:15:58 +02:00 · 2019-08-01 06:24:55 -04:00
parent 94e6a95037 569146446e
commit 87530f69c3
5 changed files with 44 additions and 107 deletions
@@ -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/plugins/line-numbers/prism-line-numbers.css");
+
+require('prismjs/themes/prism-tomorrow.css');
@@ -24,10 +24,7 @@ module.exports = {
      },
    },
    `gatsby-plugin-layout`,
-    {
-      resolve: `gatsby-transformer-remark`,
-      plugins: [`gatsby-remark-prismjs`],
-    },
+    `gatsby-transformer-remark`,
    {
      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`,
  ],
 }
@@ -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",
@@ -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",
@@ -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 }}