diff --git a/assets/styles/syntax_highlight.css b/assets/styles/syntax_highlight.css new file mode 100644 index 0000000..b6d2cd3 --- /dev/null +++ b/assets/styles/syntax_highlight.css @@ -0,0 +1,76 @@ +/* + +Darcula color scheme from the JetBrains family of IDEs + +*/ + +.hljs { + display: block; + overflow-x: auto; + padding: 1em; + background: #2b2b2b; + color: #bababa; + margin-bottom: 20px; + margin-left: 10px; + font-family: "Inconsolata", monospace; +} + +.hljs-strong, +.hljs-emphasis { + color: #a8a8a2; +} + +.hljs-bullet, +.hljs-quote, +.hljs-link, +.hljs-number, +.hljs-regexp, +.hljs-literal { + color: #6896ba; +} + +.hljs-code, +.hljs-selector-class { + color: #a6e22e; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-section, +.hljs-attribute, +.hljs-name, +.hljs-variable { + color: #cb7832; +} + +.hljs-params { + color: #b9b9b9; +} + +.hljs-string { + color: #6a8759; +} + +.hljs-subst, +.hljs-type, +.hljs-built_in, +.hljs-builtin-name, +.hljs-symbol, +.hljs-selector-id, +.hljs-selector-attr, +.hljs-selector-pseudo, +.hljs-template-tag, +.hljs-template-variable, +.hljs-addition { + color: #e0c46c; +} + +.hljs-comment, +.hljs-deletion, +.hljs-meta { + color: #7f7f7f; +} diff --git a/package-lock.json b/package-lock.json index 8ec62d4..7e1712b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4015,6 +4015,18 @@ "integrity": "sha512-UqBRqi4ju7T+TqGNdqAO0PaSVGsDGJUBQvk9eUWNGRY1CFGDzYhLWoM7JQEemnlvVcv/YEmc2wNW8BC24EnUsw==", "dev": true }, + "he": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", + "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", + "dev": true + }, + "highlight.js": { + "version": "9.18.1", + "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.18.1.tgz", + "integrity": "sha512-OrVKYz70LHsnCgmbXctv/bfuvntIKDz177h0Co37DQ5jamGZLVmoCVMtjMtNZY3X9DrCcKfklHPNeA0uPZhSJg==", + "dev": true + }, "home-dir": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/home-dir/-/home-dir-1.0.0.tgz", @@ -4027,6 +4039,17 @@ "integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==", "dev": true }, + "html-encoder-decoder": { + "version": "1.3.8", + "resolved": "https://registry.npmjs.org/html-encoder-decoder/-/html-encoder-decoder-1.3.8.tgz", + "integrity": "sha512-H5GJwy7y9jVpc1lrMLwQy8As0IiyLKy0TibpYX3DdpLD03MxmZnO97S9KXkvmKtMdbZo9jF1fmS+Fkx+61D5/w==", + "dev": true, + "requires": { + "he": "^1.1.0", + "iterate-object": "^1.3.2", + "regex-escape": "^3.4.2" + } + }, "http-cache-semantics": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz", @@ -4392,6 +4415,12 @@ "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=", "dev": true }, + "iterate-object": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/iterate-object/-/iterate-object-1.3.3.tgz", + "integrity": "sha512-DximWbkke36cnrSfNJv6bgcB2QOMV9PRD2FiowwzCoMsh8RupFLdbNIzWe+cVDWT+NIMNJgGlB1dGxP6kpzGtA==", + "dev": true + }, "jimp": { "version": "0.9.8", "resolved": "https://registry.npmjs.org/jimp/-/jimp-0.9.8.tgz", @@ -6589,6 +6618,12 @@ "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==", "dev": true }, + "regex-escape": { + "version": "3.4.9", + "resolved": "https://registry.npmjs.org/regex-escape/-/regex-escape-3.4.9.tgz", + "integrity": "sha512-Cv9rjwyQwVhn3L097ysanWsEElurmxDj6Cc4Ut23z7e6hzRbrNvF3Le7yAciMfuzyb0sZwSr0ZHunMNCIoy2/g==", + "dev": true + }, "registry-auth-token": { "version": "3.4.0", "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-3.4.0.tgz", @@ -7149,6 +7184,17 @@ "yargs": "^14.2" } }, + "showdown-highlight": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/showdown-highlight/-/showdown-highlight-2.1.4.tgz", + "integrity": "sha512-6HLf/ScJXvI4n42zdPq79htmY6duk9b++WHieb3M7D1bsfy9oI8TjQp0SgMGyKP5eT3jA2XcnSoKzDOQRAWHAw==", + "dev": true, + "requires": { + "highlight.js": "^9.18.1", + "html-encoder-decoder": "^1.3.8", + "showdown": "^1.9.1" + } + }, "signal-exit": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz", diff --git a/package.json b/package.json index b0d4424..e6c900e 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "firebase-tools": "^8.2.0", "nodemon": "^2.0.3", "showdown": "^1.9.1", + "showdown-highlight": "^2.1.4", "standard-version": "^8.0.0", "ts-node": "^8.10.1", "typescript": "^3.8.3", diff --git a/scripts/generateThoughts.ts b/scripts/generateThoughts.ts index 759b8eb..0d2f8a8 100644 --- a/scripts/generateThoughts.ts +++ b/scripts/generateThoughts.ts @@ -1,5 +1,6 @@ import * as fs from "fs"; import showdown from "showdown"; +import showdownHighlight from "showdown-highlight"; import { format as dateFormat } from "date-fns"; import findInDir from "./findInDir"; @@ -28,7 +29,9 @@ templates.forEach((template) => { console.log(`Processing articles`); const articles = findInDir("./thoughts/articles", ".md"); -const mdConverter = new showdown.Converter(); +const mdConverter = new showdown.Converter({ + extensions: [showdownHighlight], +}); const articlesGenerated: Array<{ title: string; diff --git a/templates/head.html b/templates/head.html index e89e424..ede64b4 100644 --- a/templates/head.html +++ b/templates/head.html @@ -37,7 +37,7 @@ {meta.html}