Merge pull request #180 from h-enk/syntax-highlighting

Add highlight.js as an option
This commit is contained in:
Henk Verlinde 2021-03-16 10:26:48 +01:00 committed by GitHub
commit 3bcc0c199b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 251 additions and 30 deletions

24
assets/js/highlight.js Normal file
View File

@ -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);
});
});

View File

@ -7,14 +7,18 @@
/** Import Bootstrap */ /** Import Bootstrap */
@import "bootstrap/scss/bootstrap"; @import "bootstrap/scss/bootstrap";
/** Import highlight.js */
// @import "highlight.js/scss/dracula";
/** Import theme styles */ /** Import theme styles */
@import "common/fonts"; @import "common/fonts";
@import "common/global"; @import "common/global";
@import "common/dark"; @import "common/dark";
@import "components/doks";
// @import "components/syntax";
@import "components/code";
@import "components/alerts"; @import "components/alerts";
@import "components/buttons"; @import "components/buttons";
@import "components/code";
// @import "components/syntax";
@import "components/comments"; @import "components/comments";
@import "components/forms"; @import "components/forms";
@import "components/images"; @import "components/images";

View File

@ -38,6 +38,16 @@ body.dark .btn-primary {
color: $body-bg-dark !important; 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 { body.dark .navbar {
background: $body-bg-dark; background: $body-bg-dark;
opacity: 0.975; opacity: 0.975;
@ -178,12 +188,7 @@ body.dark ::selection {
background: $selection-color-dark; background: $selection-color-dark;
} }
body.dark pre { body.dark code:not(.hljs) {
background: $body-overlay-dark;
color: $body-color-dark;
}
body.dark code {
background: $body-overlay-dark; background: $body-overlay-dark;
color: $body-color-dark; color: $body-color-dark;
} }

View File

@ -55,9 +55,19 @@ body.dark .toggle-dark {
} }
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
.doks-clipboard {
position: relative;
float: right;
}
.btn-clipboard { .btn-clipboard {
position: absolute;
top: 1rem;
right: 0.25rem;
z-index: 10;
display: block; display: block;
margin: 2.0625rem 0.25rem -4rem auto; padding: 0.25rem 0.5rem;
font-size: $font-size-sm;
} }
} }

View File

@ -7,37 +7,37 @@ samp {
border-radius: $border-radius; 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 { code {
background: $beige; background: $beige;
color: $black; color: $black;
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
} }
pre {
margin: 2rem 0;
}
pre code { pre code {
background: none; display: block;
font-size: inherit; overflow-x: auto;
padding: 0; line-height: $line-height-base;
padding: 1.25rem 1.5rem;
tab-size: 4;
}
.hljs {
padding: 1.25rem 1.5rem;
} }
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
pre {
margin: 2rem -1.5rem;
}
pre, pre,
code, code,
kbd, kbd,
samp { samp {
border-radius: 0; border-radius: 0;
} }
pre {
margin: 2rem -1.5rem;
}
} }

View File

@ -0,0 +1,50 @@
/*
Doks based on Ascetic by (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org>
*/
.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;
}

View File

@ -54,7 +54,7 @@ rel = "sitemap"
[markup.goldmark.renderer] [markup.goldmark.renderer]
unsafe = true unsafe = true
[markup.highlight] [markup.highlight]
codeFences = true codeFences = false
guessSyntax = false guessSyntax = false
hl_Lines = "" hl_Lines = ""
lineNoStart = 1 lineNoStart = 1

View File

@ -4,6 +4,12 @@
identifier = "prologue" identifier = "prologue"
url = "/docs/prologue/" url = "/docs/prologue/"
[[docs]]
name = "Examples"
weight = 20
identifier = "examples"
url = "/docs/examples/"
[[docs]] [[docs]]
name = "Help" name = "Help"
weight = 60 weight = 60

View File

@ -48,9 +48,10 @@ editPage = false
[options] [options]
lazySizes = true lazySizes = true
clipBoard = true clipBoard = false
instantPage = true instantPage = true
flexSearch = true flexSearch = true
darkMode = true darkMode = true
bootStrapJs = false bootStrapJs = false
breadCrumb = false breadCrumb = false
highLight = true

View File

@ -19,6 +19,7 @@ module.exports = {
'th', 'th',
'td', 'td',
...whitelister([ ...whitelister([
'./assets/scss/components/_doks.scss',
'./assets/scss/components/_code.scss', './assets/scss/components/_code.scss',
'./assets/scss/components/_search.scss', './assets/scss/components/_search.scss',
'./assets/scss/common/_dark.scss', './assets/scss/common/_dark.scss',

View File

@ -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: []
---

View File

@ -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 (
<div>
<web-component>{block}</web-component>
</div>
)
}
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
```

View File

@ -4,6 +4,9 @@
{{ $bs := resources.Get "js/bootstrap.js" -}} {{ $bs := resources.Get "js/bootstrap.js" -}}
{{ $bs := $bs | js.Build -}} {{ $bs := $bs | js.Build -}}
{{ $highlight := resources.Get "js/highlight.js" -}}
{{ $highlight := $highlight | js.Build -}}
{{ $app := resources.Get "js/app.js" -}} {{ $app := resources.Get "js/app.js" -}}
{{ $slice := slice $app -}} {{ $slice := slice $app -}}
@ -44,6 +47,9 @@
<script src="{{ $bs.Permalink }}" defer></script> <script src="{{ $bs.Permalink }}" defer></script>
{{ end -}} {{ end -}}
<script src="{{ $js.Permalink }}" defer></script> <script src="{{ $js.Permalink }}" defer></script>
{{ if .Site.Params.options.highLight -}}
<script src="{{ $highlight.Permalink }}" defer></script>
{{ end -}}
{{ if .Site.Params.options.flexSearch -}} {{ if .Site.Params.options.flexSearch -}}
<script src="{{ $index.Permalink }}" defer></script> <script src="{{ $index.Permalink }}" defer></script>
{{ end -}} {{ end -}}
@ -51,10 +57,14 @@
{{ $js := $js | minify | fingerprint "sha512" -}} {{ $js := $js | minify | fingerprint "sha512" -}}
{{ $index := $index | minify | fingerprint "sha512" -}} {{ $index := $index | minify | fingerprint "sha512" -}}
{{ $bs := $bs | minify | fingerprint "sha512" -}} {{ $bs := $bs | minify | fingerprint "sha512" -}}
{{ $highlight := $highlight | minify | fingerprint "sha512" -}}
{{ if .Site.Params.options.bootStrapJs -}} {{ if .Site.Params.options.bootStrapJs -}}
<script src="{{ $bs.Permalink }}" integrity="{{ $bs.Data.Integrity }}" crossorigin="anonymous" defer></script> <script src="{{ $bs.Permalink }}" integrity="{{ $bs.Data.Integrity }}" crossorigin="anonymous" defer></script>
{{ end -}} {{ end -}}
<script src="{{ $js.Permalink }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous" defer></script> <script src="{{ $js.Permalink }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous" defer></script>
{{ if .Site.Params.options.highLight -}}
<script src="{{ $highlight.Permalink }}" defer></script>
{{ end -}}
{{ if .Site.Params.options.flexSearch -}} {{ if .Site.Params.options.flexSearch -}}
<script src="{{ $index.Permalink }}" integrity="{{ $index.Data.Integrity }}" crossorigin="anonymous" defer></script> <script src="{{ $index.Permalink }}" integrity="{{ $index.Data.Integrity }}" crossorigin="anonymous" defer></script>
{{ end -}} {{ end -}}

View File

@ -1 +1,5 @@
<button class="btn-clipboard btn btn-sm btn-link" data-clipboard-text="{{ .Get "text" | safeHTML }}"><span class="copy-status"></span></button> {{ if .Site.Params.options.clipBoard -}}
<div class="doks-clipboard">
<button class="btn-clipboard btn btn-link" data-clipboard-text="{{ .Get "text" | safeHTML }}"><span class="copy-status"></span></button>
</div>
{{ end -}}

17
package-lock.json generated
View File

@ -5,6 +5,7 @@
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "doks",
"version": "0.1.6", "version": "0.1.6",
"devDependencies": { "devDependencies": {
"@babel/cli": "^7.13", "@babel/cli": "^7.13",
@ -16,6 +17,7 @@
"clipboard": "^2.0", "clipboard": "^2.0",
"eslint": "^7.22", "eslint": "^7.22",
"flexsearch": "^0.6", "flexsearch": "^0.6",
"highlight.js": "^10.6.0",
"hugo-bin": "^0.69", "hugo-bin": "^0.69",
"instant.page": "^5.1", "instant.page": "^5.1",
"lazysizes": "^5.3", "lazysizes": "^5.3",
@ -6716,6 +6718,15 @@
"minimalistic-assert": "^1.0.1" "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": { "node_modules/hmac-drbg": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@ -19444,6 +19455,12 @@
"minimalistic-assert": "^1.0.1" "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": { "hmac-drbg": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",

View File

@ -40,6 +40,7 @@
"clipboard": "^2.0", "clipboard": "^2.0",
"eslint": "^7.22", "eslint": "^7.22",
"flexsearch": "^0.6", "flexsearch": "^0.6",
"highlight.js": "^10.6.0",
"hugo-bin": "^0.69", "hugo-bin": "^0.69",
"instant.page": "^5.1", "instant.page": "^5.1",
"lazysizes": "^5.3", "lazysizes": "^5.3",