diff --git a/gatsby-browser.js b/gatsby-browser.js index 71a3267..b41f255 100644 --- a/gatsby-browser.js +++ b/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/plugins/line-numbers/prism-line-numbers.css"); + +require('prismjs/themes/prism-tomorrow.css'); diff --git a/gatsby-config.js b/gatsby-config.js index 2b348d2..055327b 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -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`, ], } diff --git a/package-lock.json b/package-lock.json index 6d47f9a..40f9503 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 16d9004..d0bbf17 100644 --- a/package.json +++ b/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", diff --git a/src/components/Markdown/index.tsx b/src/components/Markdown/index.tsx index 43038a4..00298f8 100644 --- a/src/components/Markdown/index.tsx +++ b/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 (