From b902cb70711386f47dd1471cb5ff9b90bd2e93d0 Mon Sep 17 00:00:00 2001 From: Henk Verlinde Date: Tue, 15 Jun 2021 16:27:38 +0200 Subject: [PATCH] feat: migrate to highlight.js v11.0.1 --- assets/js/highlight.js | 4 +- assets/scss/app.scss | 7 +- assets/scss/components/_doks.scss | 62 --------- assets/scss/components/_syntax.scss | 191 +++++++++------------------- config/postcss.config.js | 2 +- package-lock.json | 52 ++++---- package.json | 2 +- 7 files changed, 94 insertions(+), 226 deletions(-) delete mode 100644 assets/scss/components/_doks.scss diff --git a/assets/js/highlight.js b/assets/js/highlight.js index f9879dc..00a2a2d 100644 --- a/assets/js/highlight.js +++ b/assets/js/highlight.js @@ -3,7 +3,7 @@ import hljs from 'highlight.js/lib/core'; import javascript from 'highlight.js/lib/languages/javascript'; import json from 'highlight.js/lib/languages/json'; import bash from 'highlight.js/lib/languages/bash'; -import htmlbars from 'highlight.js/lib/languages/htmlbars'; +import xml from 'highlight.js/lib/languages/xml'; import ini from 'highlight.js/lib/languages/ini'; import yaml from 'highlight.js/lib/languages/yaml'; import markdown from 'highlight.js/lib/languages/markdown'; @@ -11,7 +11,7 @@ import markdown from 'highlight.js/lib/languages/markdown'; hljs.registerLanguage('javascript', javascript); hljs.registerLanguage('json', json); hljs.registerLanguage('bash', bash); -hljs.registerLanguage('html', htmlbars); +hljs.registerLanguage('html', xml); hljs.registerLanguage('ini', ini); hljs.registerLanguage('toml', ini); hljs.registerLanguage('yaml', yaml); diff --git a/assets/scss/app.scss b/assets/scss/app.scss index 29a22a5..9086c5b 100644 --- a/assets/scss/app.scss +++ b/assets/scss/app.scss @@ -8,7 +8,7 @@ @import "bootstrap/scss/bootstrap"; /** Import highlight.js */ -// @import "highlight.js/scss/dracula"; +// @import "highlight.js/scss/github-dark-dimmed"; /** Import KaTeX */ @import "katex/dist/katex"; @@ -17,11 +17,10 @@ @import "common/fonts"; @import "common/global"; @import "common/dark"; -@import "components/doks"; -// @import "components/syntax"; -@import "components/code"; @import "components/alerts"; @import "components/buttons"; +@import "components/code"; +@import "components/syntax"; @import "components/comments"; @import "components/forms"; @import "components/images"; diff --git a/assets/scss/components/_doks.scss b/assets/scss/components/_doks.scss deleted file mode 100644 index 4c8bfc7..0000000 --- a/assets/scss/components/_doks.scss +++ /dev/null @@ -1,62 +0,0 @@ -/* - -Doks — based on Ascetic by (c) Ivan Sagalaev - -*/ - -.hljs { - display: block; - overflow-x: auto; - padding: 0.5em; - background: $beige; - color: $body-color; -} - -.hljs-string, -.hljs-variable, -.hljs-template-variable, -.hljs-symbol, -.hljs-bullet, -.hljs-section, -.hljs-addition, -.hljs-attribute, -.hljs-link { - color: $pink-500; -} - -.hljs-comment, -.hljs-quote, -.hljs-meta, -.hljs-deletion { - color: #888; -} - -.hljs-keyword, -.hljs-selector-tag, -.hljs-section, -.hljs-name, -.hljs-type, -.hljs-strong { - font-weight: bold; -} - -.hljs-emphasis { - font-style: italic; -} - -body.dark .hljs { - background: $body-overlay-dark; - color: $body-color-dark; -} - -body.dark .hljs-string, -body.dark .hljs-variable, -body.dark .hljs-template-variable, -body.dark .hljs-symbol, -body.dark .hljs-bullet, -body.dark .hljs-section, -body.dark .hljs-addition, -body.dark .hljs-attribute, -body.dark .hljs-link { - color: $blue-300; -} diff --git a/assets/scss/components/_syntax.scss b/assets/scss/components/_syntax.scss index d9a1c02..a439178 100644 --- a/assets/scss/components/_syntax.scss +++ b/assets/scss/components/_syntax.scss @@ -1,131 +1,62 @@ -/*! - * GitHub Light v0.5.0 - * Copyright (c) 2012 - 2017 GitHub, Inc. - * Licensed under MIT (https://github.com/primer/github-syntax-theme-generator/blob/master/LICENSE) - */ +/* - .c1, - .c /* comment, punctuation.definition.comment, string.comment */ { - color: #6a737d; - } - - .v /* variable */, - .smw /* sublimelinter.mark.warning */ { - color: #e36209; - } - - // .c1 /* constant, entity.name.constant, variable.other.constant, variable.language, support, meta.property-name, support.constant, support.variable, meta.module-reference, markup.raw, meta.diff.header, meta.output */, - .s .v /* string variable */ { - color: #005cc5; - } - - .e /* entity */, - .en /* entity.name */ { - color: #6f42c1; - } - - .smi /* variable.parameter.function, storage.modifier.package, storage.modifier.import, storage.type.java, variable.other */, - .s .s1 /* string source */ { - color: #24292e; - } - - .ent /* entity.name.tag, markup.quote */ { - color: #22863a; - } - - .k /* keyword, storage, storage.type */ { - color: #d73a49; - } - - .s /* string */, - .pds /* punctuation.definition.string, source.regexp, string.regexp.character-class */, - .s .pse .s1 /* string punctuation.section.embedded source */, - .sr /* string.regexp */, - .sr .cce /* string.regexp constant.character.escape */, - .sr .sre /* string.regexp source.ruby.embedded */, - .sr .sra /* string.regexp string.regexp.arbitrary-repitition */ { - color: #032f62; - } - - .bu /* invalid.broken, invalid.deprecated, invalid.unimplemented, message.error, brackethighlighter.unmatched, sublimelinter.mark.error */ { - color: #b31d28; - } - - .ii /* invalid.illegal */ { - color: #fafbfc; - background-color: #b31d28; - } - - .c2 /* carriage-return */ { - color: #fafbfc; - background-color: #d73a49; - } - - .c2::before /* carriage-return */ { - content: "^M"; - } - - .sr .cce /* string.regexp constant.character.escape */ { - font-weight: bold; - color: #22863a; - } - - .ml /* markup.list */ { - color: #735c0f; - } - - .mh /* markup.heading */, - .mh .en /* markup.heading entity.name */, - .ms /* meta.separator */ { - font-weight: bold; - color: #005cc5; - } - - .mi /* markup.italic */ { - font-style: italic; - color: #24292e; - } - - .mb /* markup.bold */ { - font-weight: bold; - color: #24292e; - } - - .md /* markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted */ { - color: #b31d28; - background-color: #ffeef0; - } - - .mi1 /* markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted */ { - color: #22863a; - background-color: #f0fff4; - } - - .mc /* markup.changed, punctuation.definition.changed */ { - color: #e36209; - background-color: #ffebda; - } - - .mi2 /* markup.ignored, markup.untracked */ { - color: #f6f8fa; - background-color: #005cc5; - } - - .mdr /* meta.diff.range */ { - font-weight: bold; - color: #6f42c1; - } - - .ba /* brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote */ { - color: #586069; - } - - .sg /* sublimelinter.gutter-mark */ { - color: #959da5; - } - - .corl /* constant.other.reference.link, string.other.link */ { - text-decoration: underline; - color: #032f62; - } - \ No newline at end of file +Based on Ascetic by (c) Ivan Sagalaev + +*/ + +.hljs { + display: block; + overflow-x: auto; + padding: 1.25rem 1.5rem; + background: $beige; + color: $body-color; +} + +.hljs-string, +.hljs-variable, +.hljs-template-variable, +.hljs-symbol, +.hljs-bullet, +.hljs-section, +.hljs-addition, +.hljs-attribute, +.hljs-link { + color: $pink-500; +} + +.hljs-comment, +.hljs-quote, +.hljs-meta, +.hljs-deletion { + color: #888; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-section, +.hljs-name, +.hljs-type, +.hljs-strong { + font-weight: bold; +} + +.hljs-emphasis { + font-style: italic; +} + +body.dark .hljs { + background: $body-overlay-dark; + color: $body-color-dark; +} + +body.dark .hljs-string, +body.dark .hljs-variable, +body.dark .hljs-template-variable, +body.dark .hljs-symbol, +body.dark .hljs-bullet, +body.dark .hljs-section, +body.dark .hljs-addition, +body.dark .hljs-attribute, +body.dark .hljs-link { + color: $blue-300; +} diff --git a/config/postcss.config.js b/config/postcss.config.js index a97ab78..9d1c6e9 100644 --- a/config/postcss.config.js +++ b/config/postcss.config.js @@ -19,8 +19,8 @@ module.exports = { 'th', 'td', ...whitelister([ - './assets/scss/components/_doks.scss', './assets/scss/components/_code.scss', + './assets/scss/components/_syntax.scss', './assets/scss/components/_search.scss', './assets/scss/common/_dark.scss', './node_modules/katex/dist/katex.css', diff --git a/package-lock.json b/package-lock.json index 88e8758..2196162 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,7 +18,7 @@ "clipboard": "^2.0", "eslint": "^7.28", "flexsearch": "^0.6", - "highlight.js": "^10.7.2", + "highlight.js": "^11.0", "hugo-bin": "^0.71", "instant.page": "^5.1", "katex": "^0.13", @@ -174,9 +174,9 @@ } }, "node_modules/@babel/helper-create-class-features-plugin": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.14.5.tgz", - "integrity": "sha512-Uq9z2e7ZtcnDMirRqAGLRaLwJn+Lrh388v5ETrR3pALJnElVh2zqQmdbz4W2RUJYohAPh2mtyPUgyMHMzXMncQ==", + "version": "7.14.6", + "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.14.6.tgz", + "integrity": "sha512-Z6gsfGofTxH/+LQXqYEK45kxmcensbzmk/oi8DmaQytlQCgqNZt9XQF8iqlI/SeXWVjaMNxvYvzaYw+kh42mDg==", "dev": true, "dependencies": { "@babel/helper-annotate-as-pure": "^7.14.5", @@ -1350,9 +1350,9 @@ } }, "node_modules/@babel/plugin-transform-spread": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.14.5.tgz", - "integrity": "sha512-/3iqoQdiWergnShZYl0xACb4ADeYCJ7X/RgmwtXshn6cIvautRPAFzhd58frQlokLO6Jb4/3JXvmm6WNTPtiTw==", + "version": "7.14.6", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.14.6.tgz", + "integrity": "sha512-Zr0x0YroFJku7n7+/HH3A2eIrGMjbmAIbJSVv0IZ+t3U2WUQUA64S/oeied2e+MaGSjmt4alzBCsK9E8gh+fag==", "dev": true, "dependencies": { "@babel/helper-plugin-utils": "^7.14.5", @@ -1545,9 +1545,9 @@ } }, "node_modules/@babel/runtime": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.5.tgz", - "integrity": "sha512-121rumjddw9c3NCQ55KGkyE1h/nzWhU/owjhw0l4mQrkzz4x9SGS1X8gFLraHwX7td3Yo4QTL+qj0NcIzN87BA==", + "version": "7.14.6", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.6.tgz", + "integrity": "sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==", "dev": true, "dependencies": { "regenerator-runtime": "^0.13.4" @@ -7427,12 +7427,12 @@ } }, "node_modules/highlight.js": { - "version": "10.7.3", - "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz", - "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==", + "version": "11.0.1", + "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.0.1.tgz", + "integrity": "sha512-EqYpWyTF2s8nMfttfBA2yLKPNoZCO33pLS4MnbXQ4hECf1TKujCt1Kq7QAdrio7roL4+CqsfjqwYj4tYgq0pJQ==", "dev": true, "engines": { - "node": "*" + "node": ">=12.0.0" } }, "node_modules/hmac-drbg": { @@ -15102,9 +15102,9 @@ } }, "@babel/helper-create-class-features-plugin": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.14.5.tgz", - "integrity": "sha512-Uq9z2e7ZtcnDMirRqAGLRaLwJn+Lrh388v5ETrR3pALJnElVh2zqQmdbz4W2RUJYohAPh2mtyPUgyMHMzXMncQ==", + "version": "7.14.6", + "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.14.6.tgz", + "integrity": "sha512-Z6gsfGofTxH/+LQXqYEK45kxmcensbzmk/oi8DmaQytlQCgqNZt9XQF8iqlI/SeXWVjaMNxvYvzaYw+kh42mDg==", "dev": true, "requires": { "@babel/helper-annotate-as-pure": "^7.14.5", @@ -15891,9 +15891,9 @@ } }, "@babel/plugin-transform-spread": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.14.5.tgz", - "integrity": "sha512-/3iqoQdiWergnShZYl0xACb4ADeYCJ7X/RgmwtXshn6cIvautRPAFzhd58frQlokLO6Jb4/3JXvmm6WNTPtiTw==", + "version": "7.14.6", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.14.6.tgz", + "integrity": "sha512-Zr0x0YroFJku7n7+/HH3A2eIrGMjbmAIbJSVv0IZ+t3U2WUQUA64S/oeied2e+MaGSjmt4alzBCsK9E8gh+fag==", "dev": true, "requires": { "@babel/helper-plugin-utils": "^7.14.5", @@ -16041,9 +16041,9 @@ } }, "@babel/runtime": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.5.tgz", - "integrity": "sha512-121rumjddw9c3NCQ55KGkyE1h/nzWhU/owjhw0l4mQrkzz4x9SGS1X8gFLraHwX7td3Yo4QTL+qj0NcIzN87BA==", + "version": "7.14.6", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.6.tgz", + "integrity": "sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==", "dev": true, "requires": { "regenerator-runtime": "^0.13.4" @@ -20815,9 +20815,9 @@ "dev": true }, "highlight.js": { - "version": "10.7.3", - "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz", - "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==", + "version": "11.0.1", + "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.0.1.tgz", + "integrity": "sha512-EqYpWyTF2s8nMfttfBA2yLKPNoZCO33pLS4MnbXQ4hECf1TKujCt1Kq7QAdrio7roL4+CqsfjqwYj4tYgq0pJQ==", "dev": true }, "hmac-drbg": { diff --git a/package.json b/package.json index 09215a2..1ab3067 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,7 @@ "clipboard": "^2.0", "eslint": "^7.28", "flexsearch": "^0.6", - "highlight.js": "^10.7.2", + "highlight.js": "^11.0", "hugo-bin": "^0.71", "instant.page": "^5.1", "katex": "^0.13",