From 7bcded84285dd2e904aae342e9c5b24659bb0830 Mon Sep 17 00:00:00 2001 From: Sergey Yarkov Date: Sun, 16 Aug 2020 23:07:10 +0300 Subject: [PATCH] switched to prismjs --- gatsby-browser.js | 3 +- gatsby-config.js | 39 ++++++++-- package-lock.json | 157 ++++++++++++++--------------------------- package.json | 7 +- src/styles/global.scss | 108 +++++++++++++++++++++++----- 5 files changed, 180 insertions(+), 134 deletions(-) diff --git a/gatsby-browser.js b/gatsby-browser.js index 8f90502..dbc9866 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -2,7 +2,8 @@ import "firebase/database" import React from "react" import Layout from "./src/components/Layout/Layout" -import "gatsby-remark-vscode/styles.css" +import "prismjs/themes/prism-tomorrow.css" +import 'prismjs/plugins/line-numbers/prism-line-numbers.css' import "./src/styles/global.scss" import "./src/components/Header/Header.scss" diff --git a/gatsby-config.js b/gatsby-config.js index d99bc59..3a560b4 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -215,15 +215,40 @@ module.exports = { }, }, { - resolve: `gatsby-remark-vscode`, + resolve: `gatsby-transformer-remark`, options: { - extensions: ["material-theme"], - theme: { - default: "Light+ (default light)", - parentSelector: { - "body.dark": "One Dark Pro", + plugins: [ + { + resolve: `gatsby-remark-prismjs`, + options: { + classPrefix: "language-", + inlineCodeMarker: null, + aliases: {}, + showLineNumbers: true, + noInlineHighlight: false, + languageExtensions: [ + { + language: "superscript", + extend: "javascript", + definition: { + superscript_types: /(SuperType)/, + }, + insertBefore: { + function: { + superscript_keywords: /(superif|superelse)/, + }, + }, + }, + ], + prompt: { + user: "root", + host: "localhost", + global: false, + }, + escapeEntities: {}, + }, }, - }, + ], }, }, ], diff --git a/package-lock.json b/package-lock.json index b55d427..a64bd77 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9801,6 +9801,34 @@ } } }, + "gatsby-remark-prismjs": { + "version": "3.5.10", + "resolved": "https://registry.npmjs.org/gatsby-remark-prismjs/-/gatsby-remark-prismjs-3.5.10.tgz", + "integrity": "sha512-1lywDdXyu+y7ieZ7PsrXgwtso1n59gO5btHdbZXCFpvuYt7MHoJhb0FewkbsZ3goJMJ2q8yug5jEGaRKX2vSOQ==", + "requires": { + "@babel/runtime": "^7.10.3", + "parse-numeric-range": "^0.0.2", + "unist-util-visit": "^1.4.1" + }, + "dependencies": { + "unist-util-visit": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-1.4.1.tgz", + "integrity": "sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw==", + "requires": { + "unist-util-visit-parents": "^2.0.0" + } + }, + "unist-util-visit-parents": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-2.1.2.tgz", + "integrity": "sha512-DyN5vD4NE3aSeB+PXYNKxzGsfocxp6asDc2XXE3b0ekO2BaRUpBicbbUygfSvYfUz1IkmjFR1YF7dPklraMZ2g==", + "requires": { + "unist-util-is": "^3.0.0" + } + } + } + }, "gatsby-remark-relative-images": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/gatsby-remark-relative-images/-/gatsby-remark-relative-images-0.3.0.tgz", @@ -9865,38 +9893,6 @@ } } }, - "gatsby-remark-vscode": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/gatsby-remark-vscode/-/gatsby-remark-vscode-3.0.1.tgz", - "integrity": "sha512-CqVROFqSTfQj88t8vnuP/rxJFpKiSL7gSBxNjdsyPZMpNsxTTjJ1jq3xiCqrIW8xh7gyk//+bZ5KJteucxrANw==", - "requires": { - "decompress": "^4.2.0", - "json5": "^2.1.1", - "loglevel": "^1.6.4", - "oniguruma": "^7.2.0", - "plist": "^3.0.1", - "unist-util-visit": "^1.4.1", - "vscode-textmate": "4.2.2" - }, - "dependencies": { - "unist-util-visit": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-1.4.1.tgz", - "integrity": "sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw==", - "requires": { - "unist-util-visit-parents": "^2.0.0" - } - }, - "unist-util-visit-parents": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-2.1.2.tgz", - "integrity": "sha512-DyN5vD4NE3aSeB+PXYNKxzGsfocxp6asDc2XXE3b0ekO2BaRUpBicbbUygfSvYfUz1IkmjFR1YF7dPklraMZ2g==", - "requires": { - "unist-util-is": "^3.0.0" - } - } - } - }, "gatsby-source-filesystem": { "version": "2.3.18", "resolved": "https://registry.npmjs.org/gatsby-source-filesystem/-/gatsby-source-filesystem-2.3.18.tgz", @@ -10007,13 +10003,13 @@ } }, "gatsby-transformer-remark": { - "version": "2.8.23", - "resolved": "https://registry.npmjs.org/gatsby-transformer-remark/-/gatsby-transformer-remark-2.8.23.tgz", - "integrity": "sha512-WkTHBDqpshmYtwEtCc9491cg8sGqsT/jmBh2KjqZRzap7v1PrC5DWMfdafbkli3UcvS0DEytB/ZtFDFtcRdr5g==", + "version": "2.8.28", + "resolved": "https://registry.npmjs.org/gatsby-transformer-remark/-/gatsby-transformer-remark-2.8.28.tgz", + "integrity": "sha512-89f3ouvgXx7ZMvqk7zggdnbucvGs0w9z0k8Gqn8RMhipPRWeGngh2+WOh9q9ekus1e8wyMJxTe0kFdn37KHykg==", "requires": { "@babel/runtime": "^7.10.3", "bluebird": "^3.7.2", - "gatsby-core-utils": "^1.3.11", + "gatsby-core-utils": "^1.3.15", "gray-matter": "^4.0.2", "hast-util-raw": "^4.0.0", "hast-util-to-html": "^4.0.1", @@ -10035,9 +10031,9 @@ }, "dependencies": { "gatsby-core-utils": { - "version": "1.3.11", - "resolved": "https://registry.npmjs.org/gatsby-core-utils/-/gatsby-core-utils-1.3.11.tgz", - "integrity": "sha512-eaplfOveXLl1RCWja7QIke560jUKLprvCXZ446YgQ8vAYB0fXVz3u6AOf7XUmEV9F9PIkNjmfevd1oUPy9qISw==", + "version": "1.3.15", + "resolved": "https://registry.npmjs.org/gatsby-core-utils/-/gatsby-core-utils-1.3.15.tgz", + "integrity": "sha512-np1tJCGejhCHtgHdFl6+y5EwVAzdrieJZ3hdvpeOrJ22bL9ktl5XVLy4K937ThgxHLp8+ElMDVdziNun5tC8eg==", "requires": { "ci-info": "2.0.0", "configstore": "^5.0.1", @@ -13943,18 +13939,6 @@ "repeat-string": "^1.0.0" } }, - "marked": { - "version": "0.7.0", - "resolved": "https://registry.npmjs.org/marked/-/marked-0.7.0.tgz", - "integrity": "sha512-c+yYdCZJQrsRjTPhUx7VKkApw9bwDkNbHUKo1ovgcfDjb2kc8rLuRbIFyXL5WOEUwzSSKo3IXpph2K6DqB/KZg==" - }, - "material-theme": { - "version": "github:Binaryify/OneDark-Pro#b4b5a1568419d2dc59ef59a1dbe3712e22435b85", - "from": "github:Binaryify/OneDark-Pro", - "requires": { - "marked": "^0.7.0" - } - }, "md5": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/md5/-/md5-2.2.1.tgz", @@ -15695,14 +15679,6 @@ "mimic-fn": "^2.1.0" } }, - "oniguruma": { - "version": "7.2.1", - "resolved": "https://registry.npmjs.org/oniguruma/-/oniguruma-7.2.1.tgz", - "integrity": "sha512-WPS/e1uzhswPtJSe+Zls/kAj27+lEqZjCmRSjnYk/Z4L2Mu+lJC2JWtkZhPJe4kZeTQfz7ClcLyXlI4J68MG2w==", - "requires": { - "nan": "^2.14.0" - } - }, "open": { "version": "6.4.0", "resolved": "https://registry.npmjs.org/open/-/open-6.4.0.tgz", @@ -16073,6 +16049,11 @@ "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", @@ -16087,6 +16068,11 @@ "protocols": "^1.4.0" } }, + "parse-srcset": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz", + "integrity": "sha1-8r0iH2zJcKk42IVWq8WJyqqiveE=" + }, "parse-url": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/parse-url/-/parse-url-5.0.1.tgz", @@ -16277,23 +16263,6 @@ "find-up": "^3.0.0" } }, - "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" - }, - "dependencies": { - "xmlbuilder": { - "version": "9.0.7", - "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-9.0.7.tgz", - "integrity": "sha1-Ey7mPS7FVlxVfiD0wi35rKaGsQ0=" - } - } - }, "pn": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/pn/-/pn-1.1.0.tgz", @@ -17187,9 +17156,9 @@ } }, "prismjs": { - "version": "1.20.0", - "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.20.0.tgz", - "integrity": "sha512-AEDjSrVNkynnw6A+B1DsFkd6AVdTnp+/WoUixFRULlCLZVRZlVQMVWio/16jv7G1FscUxQxOQhWwApgbnxr6kQ==", + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.21.0.tgz", + "integrity": "sha512-uGdSIu1nk3kej2iZsLyDoJ7e9bnPzIgY0naW/HdknGj61zScaprVEVGHrPoXqI+M9sP0NDnTK2jpkvmldpuqDw==", "requires": { "clipboard": "^2.0.0" } @@ -19332,16 +19301,14 @@ } }, "sanitize-html": { - "version": "1.27.0", - "resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-1.27.0.tgz", - "integrity": "sha512-U1btucGeYVpg0GoK43jPpe/bDCV4cBOGuxzv5NBd0bOjyZdMKY0n98S/vNlO1wVwre0VCj8H3hbzE7gD2+RjKA==", + "version": "1.27.3", + "resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-1.27.3.tgz", + "integrity": "sha512-79tcPlgJ3fuK0/TtUCIBdPeQSvktTSTJP9O/dzrteaO98qw5UV6CATh3ZyPjUzv1LtNjHDlhbq9XOXiKf0zA1w==", "requires": { - "chalk": "^2.4.1", "htmlparser2": "^4.1.0", "lodash": "^4.17.15", - "postcss": "^7.0.27", - "srcset": "^2.0.1", - "xtend": "^4.0.1" + "parse-srcset": "^1.0.2", + "postcss": "^7.0.27" }, "dependencies": { "domelementtype": { @@ -20609,11 +20576,6 @@ } } }, - "srcset": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/srcset/-/srcset-2.0.1.tgz", - "integrity": "sha512-00kZI87TdRKwt+P8jj8UZxbfp7mK2ufxcIMWvhAOZNJTRROimpHeruWrGvCZneiuVDLqdyHefVp748ECTnyUBQ==" - }, "sshpk": { "version": "1.16.1", "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.16.1.tgz", @@ -22546,14 +22508,6 @@ "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz", "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==" }, - "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" - } - }, "w3c-hr-time": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz", @@ -23372,11 +23326,6 @@ "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz", "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==" }, - "xmldom": { - "version": "0.1.31", - "resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.1.31.tgz", - "integrity": "sha512-yS2uJflVQs6n+CyjHoaBmVSqIDevTAWrzMmjG1Gc7h1qQ7uVozNhEPJAwZXWyGQ/Gafo3fCwrcaokezLPupVyQ==" - }, "xmlhttprequest": { "version": "1.8.0", "resolved": "https://registry.npmjs.org/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz", diff --git a/package.json b/package.json index f2c1aee..d19a120 100644 --- a/package.json +++ b/package.json @@ -38,19 +38,18 @@ "gatsby-remark-autolink-headers": "^2.3.10", "gatsby-remark-copy-linked-files": "^2.3.11", "gatsby-remark-images": "^3.3.17", + "gatsby-remark-prismjs": "^3.5.10", "gatsby-remark-relative-images": "^0.3.0", "gatsby-remark-responsive-iframe": "^2.4.11", - "gatsby-remark-vscode": "^3.0.1", "gatsby-source-filesystem": "^2.3.18", - "gatsby-transformer-remark": "^2.8.23", + "gatsby-transformer-remark": "^2.8.28", "gatsby-transformer-sharp": "^2.5.10", "gitalk": "^1.6.2", - "material-theme": "github:Binaryify/OneDark-Pro", "netlify-cms-app": "^2.12.16", "node-sass": "^4.14.1", "preact": "^10.4.6", "preact-render-to-string": "^5.1.10", - "prismjs": "^1.20.0", + "prismjs": "^1.21.0", "prop-types": "^15.7.2", "query-string": "^6.13.1", "react": "^16.12.0", diff --git a/src/styles/global.scss b/src/styles/global.scss index b4679fa..0862dc0 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -125,6 +125,64 @@ article .gt-container { border-top: 4px solid #6394F7; } + .gatsby-highlight pre[class*="language-"]:before { + color: #232129; + font-size: 0.75rem; + font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + letter-spacing: 0.075em; + line-height: 1; + position: absolute; + left: 1.5rem; + text-align: right; + text-transform: uppercase; + top: 0px; + border-radius: 0px 0px 4px 4px; + padding: 0.25rem 0.5rem; + } + + .gatsby-highlight pre[class*="language-"] { + background: linear-gradient(135.9deg,#f5f9ff,#f5f9ff .01%,#f6f4fb 98.96%); + padding-top: 25px; + & code { + color: #001080; + } + & .token.selector, .token.important, .token.atrule, .token.keyword, .token.builtin { + color: #0000FF; + } + & .token.string, .token.char, .token.attr-value, .token.regex, .token.variable { + color: #A31515; + } + & .token.boolean, .token.function { + color: #795E26; + } + & .token.number { + color: #09885A; + } + & .token.operator, .token.entity, .token.url { + color: #0000FF; + } + & .token.boolean { + color: #0000FF; + } + & .token.punctuation { + color: #000000; + } + } + + .gatsby-highlight pre[class*="language-"].line-numbers .line-numbers-rows { + border: none; + padding-left: 15px; + padding-top: 25px; + & span::before { + color: #666666; + } + } + + .gatsby-highlight pre[class*="language-js"]:before { + content: "js"; + background: rgb(247, 223, 30); + } + & pre { border-radius: 7px; margin: 0 0 15px; @@ -132,24 +190,6 @@ article .gt-container { & code { padding-top: 10px; } - &[data-language=js]:before { - content: "js"; - background: rgb(247, 223, 30); - } - &[data-language]:before { - color: #232129; - font-size: 0.75rem; - font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - letter-spacing: 0.075em; - line-height: 1; - position: absolute; - left: 1.5rem; - text-align: right; - text-transform: uppercase; - top: 0px; - border-radius: 0px 0px 4px 4px; - padding: 0.25rem 0.5rem; - } } } @@ -236,6 +276,38 @@ article .gt-container { } & .inner { border-bottom: 1px solid rgba(153, 153, 153, 0.2); + .gatsby-highlight pre[class*="language-"] { + background: #282c34; + & code { + color: #E5C07B; + } + & .token.selector, .token.important, .token.atrule, .token.keyword, .token.builtin { + color: #C678DD; + } + & .token.string, .token.char, .token.attr-value, .token.regex, .token.variable { + color: #98C379; + } + & .token.boolean, .token.function { + color: #61AFEF; + } + & .token.number { + color: #D19A66; + } + & .token.operator, .token.entity, .token.url { + color: #C678DD; + } + & .token.boolean { + color: #D19A66; + } + & .token.punctuation { + color: #ABB2BF; + } + } + .gatsby-highlight pre[class*="language-"].line-numbers .line-numbers-rows { + & span::before { + color: #7e838b; + } + } } }