feat: add highlight.js as an option
This commit is contained in:
parent
47ca1a22fe
commit
5180bd53c6
|
@ -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);
|
||||||
|
});
|
||||||
|
});
|
|
@ -7,14 +7,17 @@
|
||||||
/** Import Bootstrap */
|
/** Import Bootstrap */
|
||||||
@import "bootstrap/scss/bootstrap";
|
@import "bootstrap/scss/bootstrap";
|
||||||
|
|
||||||
|
/** Import highlight.js */
|
||||||
|
@import "highlight.js/scss/gradient-dark";
|
||||||
|
|
||||||
/** 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/alerts";
|
|
||||||
@import "components/buttons";
|
|
||||||
@import "components/code";
|
@import "components/code";
|
||||||
// @import "components/syntax";
|
// @import "components/syntax";
|
||||||
|
@import "components/alerts";
|
||||||
|
@import "components/buttons";
|
||||||
@import "components/comments";
|
@import "components/comments";
|
||||||
@import "components/forms";
|
@import "components/forms";
|
||||||
@import "components/images";
|
@import "components/images";
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -110,6 +110,7 @@ $font-size-xl: $font-size-base * 1.375;
|
||||||
$font-size-lg: $font-size-base * 1.25;
|
$font-size-lg: $font-size-base * 1.25;
|
||||||
$font-size-md: $font-size-base * 1.125;
|
$font-size-md: $font-size-base * 1.125;
|
||||||
$font-size-sm: $font-size-base * 0.875;
|
$font-size-sm: $font-size-base * 0.875;
|
||||||
|
$font-size-xs: $font-size-base * 0.625;
|
||||||
|
|
||||||
$line-height-base: 1.5;
|
$line-height-base: 1.5;
|
||||||
|
|
||||||
|
|
|
@ -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: 2.125rem;
|
||||||
|
right: 1rem;
|
||||||
|
z-index: 10;
|
||||||
display: block;
|
display: block;
|
||||||
margin: 2.0625rem 0.25rem -4rem auto;
|
padding: 0.25rem 0.5rem;
|
||||||
|
font-size: $font-size-xs;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -54,3 +54,4 @@ editPage = false
|
||||||
darkMode = true
|
darkMode = true
|
||||||
bootStrapJs = false
|
bootStrapJs = false
|
||||||
breadCrumb = false
|
breadCrumb = false
|
||||||
|
highLight = false
|
||||||
|
|
|
@ -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 -}}
|
||||||
|
|
|
@ -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-outline-primary" data-clipboard-text="{{ .Get "text" | safeHTML }}"><span class="copy-status"></span></button>
|
||||||
|
</div>
|
||||||
|
{{ end -}}
|
|
@ -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",
|
||||||
|
|
|
@ -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",
|
||||||
|
|
Loading…
Reference in New Issue