Skip to content

Commit

Permalink
feat: add highlight.js as an option
Browse files Browse the repository at this point in the history
  • Loading branch information
h-enk committed Mar 15, 2021
1 parent 47ca1a2 commit 5180bd5
Show file tree
Hide file tree
Showing 12 changed files with 103 additions and 29 deletions.
22 changes: 22 additions & 0 deletions assets/js/highlight.js
Original file line number Diff line number Diff line change
@@ -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 changes: 5 additions & 2 deletions assets/scss/app.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
17 changes: 11 additions & 6 deletions assets/scss/common/_dark.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
Expand Down
1 change: 1 addition & 0 deletions assets/scss/common/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
12 changes: 11 additions & 1 deletion assets/scss/components/_buttons.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

Expand Down
34 changes: 17 additions & 17 deletions assets/scss/components/_code.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

@include media-breakpoint-down(sm) {
pre {
margin: 2rem -1.5rem;
}
.hljs {
padding: 1.25rem 1.5rem;
}

@include media-breakpoint-down(sm) {
pre,
code,
kbd,
samp {
border-radius: 0;
}

pre {
margin: 2rem -1.5rem;
}
}
2 changes: 1 addition & 1 deletion config/_default/config.toml
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ rel = "sitemap"
[markup.goldmark.renderer]
unsafe = true
[markup.highlight]
codeFences = true
codeFences = false
guessSyntax = false
hl_Lines = ""
lineNoStart = 1
Expand Down
1 change: 1 addition & 0 deletions config/_default/params.toml
Original file line number Diff line number Diff line change
Expand Up @@ -54,3 +54,4 @@ editPage = false
darkMode = true
bootStrapJs = false
breadCrumb = false
highLight = false
12 changes: 11 additions & 1 deletion layouts/partials/footer/script-footer.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 -}}
Expand Down Expand Up @@ -44,17 +47,24 @@
<script src="{{ $bs.Permalink }}" defer></script>
{{ end -}}
<script src="{{ $js.Permalink }}" defer></script>
{{ if .Site.Params.options.highLight -}}
<script src="{{ $highlight.Permalink }}" defer></script>
{{ end -}}
{{ if .Site.Params.options.flexSearch -}}
<script src="{{ $index.Permalink }}" defer></script>
{{ end -}}
{{ else -}}
{{ $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 -}}
<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 -}}
<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 -}}
<script src="{{ $index.Permalink }}" integrity="{{ $index.Data.Integrity }}" crossorigin="anonymous" defer></script>
{{ end -}}
Expand Down
6 changes: 5 additions & 1 deletion layouts/shortcodes/btn-copy.html
Original file line number Diff line number Diff line change
@@ -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 -}}
17 changes: 17 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down

0 comments on commit 5180bd5

Please sign in to comment.