From 753820e7a331d1f34ce6101626a1fbdd46dc2331 Mon Sep 17 00:00:00 2001 From: Nathan Wang Date: Wed, 3 Jun 2020 15:36:19 -0700 Subject: [PATCH] add syntax highlighting --- content/4_Plat/Plat_Fracture.md | 4 + gatsby-config.js | 8 +- package.json | 2 + src/templates/moduleTemplate.js | 1 + src/templates/prism-theme.css | 210 ++++++++++++++++++++++++++++++++ yarn.lock | 52 ++++++++ 6 files changed, 276 insertions(+), 1 deletion(-) create mode 100644 src/templates/prism-theme.css diff --git a/content/4_Plat/Plat_Fracture.md b/content/4_Plat/Plat_Fracture.md index 28d98de..98fc7a6 100644 --- a/content/4_Plat/Plat_Fracture.md +++ b/content/4_Plat/Plat_Fracture.md @@ -1,3 +1,7 @@ +--- +slug: /plat/fracture +--- + # Platinum - Fracturing Search Author: Benjamin Qi diff --git a/gatsby-config.js b/gatsby-config.js index ba39579..d1cdc29 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -27,7 +27,13 @@ module.exports = { // Add any KaTeX options from https://github.com/KaTeX/KaTeX/blob/master/docs/options.md here strict: `ignore` } - } + }, + { + resolve: `gatsby-remark-prismjs`, + options: { + noInlineHighlight: true, + }, + }, ], }, }, diff --git a/package.json b/package.json index f55e156..d3f89a5 100644 --- a/package.json +++ b/package.json @@ -14,10 +14,12 @@ "gatsby-plugin-react-helmet": "^3.3.2", "gatsby-plugin-sharp": "^2.6.9", "gatsby-remark-katex": "^3.3.3", + "gatsby-remark-prismjs": "^3.5.3", "gatsby-source-filesystem": "^2.3.8", "gatsby-transformer-remark": "^2.8.14", "gatsby-transformer-sharp": "^2.5.3", "katex": "^0.11.1", + "prismjs": "^1.20.0", "prop-types": "^15.7.2", "react": "^16.12.0", "react-dom": "^16.12.0", diff --git a/src/templates/moduleTemplate.js b/src/templates/moduleTemplate.js index 7e12559..dccab3c 100644 --- a/src/templates/moduleTemplate.js +++ b/src/templates/moduleTemplate.js @@ -4,6 +4,7 @@ import rehypeReact from "rehype-react" import Layout from "../components/layout"; import "katex/dist/katex.min.css"; +import "./prism-theme.css"; const renderAst = new rehypeReact({ createElement: React.createElement, diff --git a/src/templates/prism-theme.css b/src/templates/prism-theme.css new file mode 100644 index 0000000..7428d4d --- /dev/null +++ b/src/templates/prism-theme.css @@ -0,0 +1,210 @@ +code[class*="language-"], +pre[class*="language-"] { + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + color: #c3cee3; + background: #263238; + font-family: Roboto Mono, monospace; + font-size: 1em; + line-height: 1.5em; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +code[class*="language-"]::-moz-selection, +pre[class*="language-"]::-moz-selection, +code[class*="language-"] ::-moz-selection, +pre[class*="language-"] ::-moz-selection { + background: #363636; +} + +code[class*="language-"]::selection, +pre[class*="language-"]::selection, +code[class*="language-"] ::selection, +pre[class*="language-"] ::selection { + background: #363636; +} + +:not(pre) > code[class*="language-"] { + white-space: normal; + border-radius: 0.2em; + padding: 0.1em; +} + +pre[class*="language-"] { + overflow: auto; + position: relative; + margin: 0.5em 0; + padding: 1.25em 1em; +} + +.language-css > code, +.language-sass > code, +.language-scss > code { + color: #fd9170; +} + +[class*="language-"] .namespace { + opacity: 0.7; +} + +.token.atrule { + color: #c792ea; +} + +.token.attr-name { + color: #ffcb6b; +} + +.token.attr-value { + color: #c3e88d; +} + +.token.attribute { + color: #c3e88d; +} + +.token.boolean { + color: #c792ea; +} + +.token.builtin { + color: #ffcb6b; +} + +.token.cdata { + color: #80cbc4; +} + +.token.char { + color: #80cbc4; +} + +.token.class { + color: #ffcb6b; +} + +.token.class-name { + color: #f2ff00; +} + +.token.color { + color: #f2ff00; +} + +.token.comment { + color: #546e7a; +} + +.token.constant { + color: #c792ea; +} + +.token.deleted { + color: #f07178; +} + +.token.doctype { + color: #546e7a; +} + +.token.entity { + color: #f07178; +} + +.token.function { + color: #c792ea; +} + +.token.hexcode { + color: #f2ff00; +} + +.token.id { + color: #c792ea; + font-weight: bold; +} + +.token.important { + color: #c792ea; + font-weight: bold; +} + +.token.inserted { + color: #80cbc4; +} + +.token.keyword { + color: #c792ea; + font-style: italic; +} + +.token.number { + color: #fd9170; +} + +.token.operator { + color: #89ddff; +} + +.token.prolog { + color: #546e7a; +} + +.token.property { + color: #80cbc4; +} + +.token.pseudo-class { + color: #c3e88d; +} + +.token.pseudo-element { + color: #c3e88d; +} + +.token.punctuation { + color: #89ddff; +} + +.token.regex { + color: #f2ff00; +} + +.token.selector { + color: #f07178; +} + +.token.string { + color: #c3e88d; +} + +.token.symbol { + color: #c792ea; +} + +.token.tag { + color: #f07178; +} + +.token.unit { + color: #f07178; +} + +.token.url { + color: #fd9170; +} + +.token.variable { + color: #f07178; +} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 8ab447b..9c2dfed 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4184,6 +4184,15 @@ cli-width@^2.0.0: resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.1.tgz#b0433d0b4e9c847ef18868a4ef16fd5fc8271c48" integrity sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw== +clipboard@^2.0.0: + version "2.0.6" + resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.6.tgz#52921296eec0fdf77ead1749421b21c968647376" + integrity sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg== + dependencies: + good-listener "^1.2.2" + select "^1.1.2" + tiny-emitter "^2.0.0" + clipboardy@^2.3.0: version "2.3.0" resolved "https://registry.yarnpkg.com/clipboardy/-/clipboardy-2.3.0.tgz#3c2903650c68e46a91b388985bc2774287dba290" @@ -5184,6 +5193,11 @@ delayed-stream@~1.0.0: resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619" integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk= +delegate@^3.1.2: + version "3.2.0" + resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166" + integrity sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw== + delegates@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a" @@ -7112,6 +7126,15 @@ gatsby-remark-katex@^3.3.3: remark-math "^1.0.6" unist-util-visit "^1.4.1" +gatsby-remark-prismjs@^3.5.3: + version "3.5.3" + resolved "https://registry.yarnpkg.com/gatsby-remark-prismjs/-/gatsby-remark-prismjs-3.5.3.tgz#44a74d2b8faf2c1a1f614dc48f59cd6ff9837fa4" + integrity sha512-lAnsJPLy/3+plzmxDT0cK4bmsAVlm1CiFvtG9WKWNnA4qx4Hh9aTh2C3zARApmh6pG2OjBQt8wDMIogi47MfcA== + dependencies: + "@babel/runtime" "^7.10.2" + parse-numeric-range "^0.0.2" + unist-util-visit "^1.4.1" + gatsby-source-filesystem@^2.3.8: version "2.3.8" resolved "https://registry.yarnpkg.com/gatsby-source-filesystem/-/gatsby-source-filesystem-2.3.8.tgz#c1902fefdd700f2b34eea2d6dcd75543e49f90e2" @@ -7608,6 +7631,13 @@ globby@^8.0.1: pify "^3.0.0" slash "^1.0.0" +good-listener@^1.2.2: + version "1.2.2" + resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50" + integrity sha1-1TswzfkxPf+33JoNR3CWqm0UXFA= + dependencies: + delegate "^3.1.2" + got@8.3.2, got@^8.3.1, got@^8.3.2: version "8.3.2" resolved "https://registry.yarnpkg.com/got/-/got-8.3.2.tgz#1d23f64390e97f776cac52e5b936e5f514d2e937" @@ -11146,6 +11176,11 @@ parse-latin@^4.0.0: unist-util-modify-children "^1.0.0" unist-util-visit-children "^1.0.0" +parse-numeric-range@^0.0.2: + version "0.0.2" + resolved "https://registry.yarnpkg.com/parse-numeric-range/-/parse-numeric-range-0.0.2.tgz#b4f09d413c7adbcd987f6e9233c7b4b210c938e4" + integrity sha1-tPCdQTx6282Yf26SM8e0shDJOOQ= + parse-passwd@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6" @@ -11916,6 +11951,13 @@ pretty-hrtime@^1.0.3: resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1" integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE= +prismjs@^1.20.0: + version "1.20.0" + resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.20.0.tgz#9b685fc480a3514ee7198eac6a3bf5024319ff03" + integrity sha512-AEDjSrVNkynnw6A+B1DsFkd6AVdTnp+/WoUixFRULlCLZVRZlVQMVWio/16jv7G1FscUxQxOQhWwApgbnxr6kQ== + optionalDependencies: + clipboard "^2.0.0" + private@^0.1.8: version "0.1.8" resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff" @@ -13153,6 +13195,11 @@ select-hose@^2.0.0: resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca" integrity sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo= +select@^1.1.2: + version "1.1.2" + resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d" + integrity sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0= + selfsigned@^1.10.7: version "1.10.7" resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.7.tgz#da5819fd049d5574f28e88a9bcc6dbc6e6f3906b" @@ -14451,6 +14498,11 @@ timsort@^0.3.0: resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4" integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q= +tiny-emitter@^2.0.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423" + integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q== + tiny-warning@^1.0.2: version "1.0.3" resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"