From 5180bd53c6349372916907783fa9d0d3b22755af Mon Sep 17 00:00:00 2001 From: Henk Verlinde Date: Mon, 15 Mar 2021 18:55:49 +0100 Subject: [PATCH] feat: add highlight.js as an option --- assets/js/highlight.js | 22 ++++++++++++++ assets/scss/app.scss | 7 +++-- assets/scss/common/_dark.scss | 17 +++++++---- assets/scss/common/_variables.scss | 1 + assets/scss/components/_buttons.scss | 12 +++++++- assets/scss/components/_code.scss | 34 +++++++++++----------- config/_default/config.toml | 2 +- config/_default/params.toml | 1 + layouts/partials/footer/script-footer.html | 12 +++++++- layouts/shortcodes/btn-copy.html | 6 +++- package-lock.json | 17 +++++++++++ package.json | 1 + 12 files changed, 103 insertions(+), 29 deletions(-) create mode 100644 assets/js/highlight.js diff --git a/assets/js/highlight.js b/assets/js/highlight.js new file mode 100644 index 0000000..e84cd66 --- /dev/null +++ b/assets/js/highlight.js @@ -0,0 +1,22 @@ +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 ini from 'highlight.js/lib/languages/ini'; +import yaml from 'highlight.js/lib/languages/yaml'; + +hljs.registerLanguage('javascript', javascript); +hljs.registerLanguage('json', json); +hljs.registerLanguage('bash', bash); +hljs.registerLanguage('html', htmlbars); +hljs.registerLanguage('ini', ini); +hljs.registerLanguage('toml', ini); +hljs.registerLanguage('yaml', yaml); + +document.addEventListener('DOMContentLoaded', () => { + document.querySelectorAll('pre code').forEach((block) => { + hljs.highlightBlock(block); + }); +}); diff --git a/assets/scss/app.scss b/assets/scss/app.scss index 2d74faf..49f62c2 100644 --- a/assets/scss/app.scss +++ b/assets/scss/app.scss @@ -7,14 +7,17 @@ /** Import Bootstrap */ @import "bootstrap/scss/bootstrap"; +/** Import highlight.js */ +@import "highlight.js/scss/gradient-dark"; + /** Import theme styles */ @import "common/fonts"; @import "common/global"; @import "common/dark"; -@import "components/alerts"; -@import "components/buttons"; @import "components/code"; // @import "components/syntax"; +@import "components/alerts"; +@import "components/buttons"; @import "components/comments"; @import "components/forms"; @import "components/images"; diff --git a/assets/scss/common/_dark.scss b/assets/scss/common/_dark.scss index d6a2092..ad814a5 100644 --- a/assets/scss/common/_dark.scss +++ b/assets/scss/common/_dark.scss @@ -38,6 +38,16 @@ body.dark .btn-primary { color: $body-bg-dark !important; } +body.dark .btn-outline-primary { + @include button-outline-variant($button-color-dark, $button-color-dark); + + color: $link-color-dark; +} + +body.dark .btn-outline-primary:hover { + color: $body-bg-dark; +} + body.dark .navbar { background: $body-bg-dark; opacity: 0.975; @@ -178,12 +188,7 @@ body.dark ::selection { background: $selection-color-dark; } -body.dark pre { - background: $body-overlay-dark; - color: $body-color-dark; -} - -body.dark code { +body.dark code:not(.hljs) { background: $body-overlay-dark; color: $body-color-dark; } diff --git a/assets/scss/common/_variables.scss b/assets/scss/common/_variables.scss index 4bb8fc4..e06f1a8 100644 --- a/assets/scss/common/_variables.scss +++ b/assets/scss/common/_variables.scss @@ -110,6 +110,7 @@ $font-size-xl: $font-size-base * 1.375; $font-size-lg: $font-size-base * 1.25; $font-size-md: $font-size-base * 1.125; $font-size-sm: $font-size-base * 0.875; +$font-size-xs: $font-size-base * 0.625; $line-height-base: 1.5; diff --git a/assets/scss/components/_buttons.scss b/assets/scss/components/_buttons.scss index d9bb621..f30c81f 100644 --- a/assets/scss/components/_buttons.scss +++ b/assets/scss/components/_buttons.scss @@ -55,9 +55,19 @@ body.dark .toggle-dark { } @include media-breakpoint-up(md) { + .doks-clipboard { + position: relative; + float: right; + } + .btn-clipboard { + position: absolute; + top: 2.125rem; + right: 1rem; + z-index: 10; display: block; - margin: 2.0625rem 0.25rem -4rem auto; + padding: 0.25rem 0.5rem; + font-size: $font-size-xs; } } diff --git a/assets/scss/components/_code.scss b/assets/scss/components/_code.scss index edbf3a6..f1ae47e 100644 --- a/assets/scss/components/_code.scss +++ b/assets/scss/components/_code.scss @@ -7,37 +7,37 @@ samp { border-radius: $border-radius; } -pre { - background: $beige; - color: $black; - line-height: $line-height-base; - margin: 2rem 0; - overflow: auto; - padding: 1.25rem 1.5rem; - tab-size: 4; -} - code { background: $beige; color: $black; padding: 0.25rem 0.5rem; } +pre { + margin: 2rem 0; +} + pre code { - background: none; - font-size: inherit; - padding: 0; + display: block; + overflow-x: auto; + line-height: $line-height-base; + padding: 1.25rem 1.5rem; + tab-size: 4; +} + +.hljs { + padding: 1.25rem 1.5rem; } @include media-breakpoint-down(sm) { - pre { - margin: 2rem -1.5rem; - } - pre, code, kbd, samp { border-radius: 0; } + + pre { + margin: 2rem -1.5rem; + } } diff --git a/config/_default/config.toml b/config/_default/config.toml index dbdd83b..4661868 100644 --- a/config/_default/config.toml +++ b/config/_default/config.toml @@ -54,7 +54,7 @@ rel = "sitemap" [markup.goldmark.renderer] unsafe = true [markup.highlight] - codeFences = true + codeFences = false guessSyntax = false hl_Lines = "" lineNoStart = 1 diff --git a/config/_default/params.toml b/config/_default/params.toml index 3fa4b6d..d25962e 100644 --- a/config/_default/params.toml +++ b/config/_default/params.toml @@ -54,3 +54,4 @@ editPage = false darkMode = true bootStrapJs = false breadCrumb = false + highLight = false diff --git a/layouts/partials/footer/script-footer.html b/layouts/partials/footer/script-footer.html index 82e83fa..380c6a0 100644 --- a/layouts/partials/footer/script-footer.html +++ b/layouts/partials/footer/script-footer.html @@ -4,6 +4,9 @@ {{ $bs := resources.Get "js/bootstrap.js" -}} {{ $bs := $bs | js.Build -}} +{{ $highlight := resources.Get "js/highlight.js" -}} +{{ $highlight := $highlight | js.Build -}} + {{ $app := resources.Get "js/app.js" -}} {{ $slice := slice $app -}} @@ -44,6 +47,9 @@ {{ end -}} + {{ if .Site.Params.options.highLight -}} + + {{ end -}} {{ if .Site.Params.options.flexSearch -}} {{ end -}} @@ -51,10 +57,14 @@ {{ $js := $js | minify | fingerprint "sha512" -}} {{ $index := $index | minify | fingerprint "sha512" -}} {{ $bs := $bs | minify | fingerprint "sha512" -}} + {{ $highlight := $highlight | minify | fingerprint "sha512" -}} {{ if .Site.Params.options.bootStrapJs -}} - + {{ end -}} + {{ if .Site.Params.options.highLight -}} + + {{ end -}} {{ if .Site.Params.options.flexSearch -}} {{ end -}} diff --git a/layouts/shortcodes/btn-copy.html b/layouts/shortcodes/btn-copy.html index 35479e1..03da151 100644 --- a/layouts/shortcodes/btn-copy.html +++ b/layouts/shortcodes/btn-copy.html @@ -1 +1,5 @@ - +{{ if .Site.Params.options.clipBoard -}} +
+ +
+{{ end -}} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index d007b66..0163367 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,7 @@ "requires": true, "packages": { "": { + "name": "doks", "version": "0.1.6", "devDependencies": { "@babel/cli": "^7.13", @@ -16,6 +17,7 @@ "clipboard": "^2.0", "eslint": "^7.22", "flexsearch": "^0.6", + "highlight.js": "^10.6.0", "hugo-bin": "^0.69", "instant.page": "^5.1", "lazysizes": "^5.3", @@ -6716,6 +6718,15 @@ "minimalistic-assert": "^1.0.1" } }, + "node_modules/highlight.js": { + "version": "10.6.0", + "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.6.0.tgz", + "integrity": "sha512-8mlRcn5vk/r4+QcqerapwBYTe+iPL5ih6xrNylxrnBdHQiijDETfXX7VIxC3UiCRiINBJfANBAsPzAvRQj8RpQ==", + "dev": true, + "engines": { + "node": "*" + } + }, "node_modules/hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -19444,6 +19455,12 @@ "minimalistic-assert": "^1.0.1" } }, + "highlight.js": { + "version": "10.6.0", + "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.6.0.tgz", + "integrity": "sha512-8mlRcn5vk/r4+QcqerapwBYTe+iPL5ih6xrNylxrnBdHQiijDETfXX7VIxC3UiCRiINBJfANBAsPzAvRQj8RpQ==", + "dev": true + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", diff --git a/package.json b/package.json index 43424ce..dad207c 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,7 @@ "clipboard": "^2.0", "eslint": "^7.22", "flexsearch": "^0.6", + "highlight.js": "^10.6.0", "hugo-bin": "^0.69", "instant.page": "^5.1", "lazysizes": "^5.3",