diff --git a/assets/js/highlight.js b/assets/js/highlight.js new file mode 100644 index 0000000..ddc671d --- /dev/null +++ b/assets/js/highlight.js @@ -0,0 +1,24 @@ +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'; +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('ini', ini); +hljs.registerLanguage('toml', ini); +hljs.registerLanguage('yaml', yaml); +hljs.registerLanguage('md', markdown); + +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..ac2ec11 100644 --- a/assets/scss/app.scss +++ b/assets/scss/app.scss @@ -7,14 +7,18 @@ /** Import Bootstrap */ @import "bootstrap/scss/bootstrap"; +/** Import highlight.js */ +// @import "highlight.js/scss/dracula"; + /** Import theme styles */ @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/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/components/_buttons.scss b/assets/scss/components/_buttons.scss index d9bb621..73d4eb5 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: 1rem; + right: 0.25rem; + z-index: 10; display: block; - margin: 2.0625rem 0.25rem -4rem auto; + padding: 0.25rem 0.5rem; + font-size: $font-size-sm; } } 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/assets/scss/components/_doks.scss b/assets/scss/components/_doks.scss new file mode 100644 index 0000000..cee7140 --- /dev/null +++ b/assets/scss/components/_doks.scss @@ -0,0 +1,50 @@ +/* + +Doks — based on Ascetic by (c) Ivan Sagalaev + +*/ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: $beige; + color: $black; +} + +body.dark .hljs { + background: $body-overlay-dark; + color: $body-color-dark; +} + +.hljs-string, +.hljs-variable, +.hljs-template-variable, +.hljs-symbol, +.hljs-bullet, +.hljs-section, +.hljs-addition, +.hljs-attribute, +.hljs-link { + color: #888; +} + +.hljs-comment, +.hljs-quote, +.hljs-meta, +.hljs-deletion { + color: #ccc; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-section, +.hljs-name, +.hljs-type, +.hljs-strong { + font-weight: bold; +} + +.hljs-emphasis { + font-style: italic; +} 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/menus.toml b/config/_default/menus.toml index 7ed4bca..3426f62 100644 --- a/config/_default/menus.toml +++ b/config/_default/menus.toml @@ -4,6 +4,12 @@ identifier = "prologue" url = "/docs/prologue/" +[[docs]] + name = "Examples" + weight = 20 + identifier = "examples" + url = "/docs/examples/" + [[docs]] name = "Help" weight = 60 diff --git a/config/_default/params.toml b/config/_default/params.toml index 3fa4b6d..6df21b5 100644 --- a/config/_default/params.toml +++ b/config/_default/params.toml @@ -48,9 +48,10 @@ editPage = false [options] lazySizes = true - clipBoard = true + clipBoard = false instantPage = true flexSearch = true darkMode = true bootStrapJs = false breadCrumb = false + highLight = true diff --git a/config/postcss.config.js b/config/postcss.config.js index fae0993..37d8a90 100644 --- a/config/postcss.config.js +++ b/config/postcss.config.js @@ -19,6 +19,7 @@ module.exports = { 'th', 'td', ...whitelister([ + './assets/scss/components/_doks.scss', './assets/scss/components/_code.scss', './assets/scss/components/_search.scss', './assets/scss/common/_dark.scss', diff --git a/content/docs/examples/_index.md b/content/docs/examples/_index.md new file mode 100644 index 0000000..dadd987 --- /dev/null +++ b/content/docs/examples/_index.md @@ -0,0 +1,9 @@ +--- +title: "Examples" +description: "Examples" +lead: "" +date: 2021-03-16T08:43:03+01:00 +lastmod: 2021-03-16T08:43:03+01:00 +draft: false +images: [] +--- diff --git a/content/docs/examples/code.md b/content/docs/examples/code.md new file mode 100644 index 0000000..0b6efd0 --- /dev/null +++ b/content/docs/examples/code.md @@ -0,0 +1,79 @@ +--- +title: "Code" +description: "Code highlighting examples" +lead: "Code highlighting examples" +date: 2021-03-16T08:43:34+01:00 +lastmod: 2021-03-16T08:43:34+01:00 +draft: false +images: [] +menu: + docs: + parent: "examples" +weight: 200 +toc: true +--- + +## JavaScript + +```js +function $initHighlight(block, cls) { + try { + if (cls.search(/\bno\-highlight\b/) != -1) + return process(block, true, 0x0F) + + ` class="${cls}"`; + } catch (e) { + /* handle exception */ + } + for (var i = 0 / 2; i < classes.length; i++) { + if (checkCondition(classes[i]) === undefined) + console.log('undefined'); + } + + return ( +
+ {block} +
+ ) +} + +export $initHighlight; +``` + +## JSON + +```json +[ + { + "title": "apples", + "count": [12000, 20000], + "description": {"text": "...", "sensitive": false} + }, + { + "title": "oranges", + "count": [17500, null], + "description": {"text": "...", "sensitive": false} + } +] +``` + +## Bash + +```bash +#!/bin/bash + +###### CONFIG +ACCEPTED_HOSTS="/root/.hag_accepted.conf" +BE_VERBOSE=false + +if [ "$UID" -ne 0 ] +then + echo "Superuser rights required" + exit 2 +fi + +genApacheConf(){ + echo -e "# Host ${HOME_DIR}$1/$2 :" +} + +echo '"quoted"' | tr -d \" > text.txt +``` 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..28a86f4 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",