mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-11-22 23:37:53 +00:00
code highligher: switch to standard hugo highlighter #32
Since a while, Hugo has its own mechanism for code highlightning. We remove the old highlightning code provided by the client-side javascript library highlight.js and all its related files. This also solves issues introduced by Hugos own highlightning because in our theme we are currently highlighting the code twice leading to unpredictiable results. This will also fix an issue were light code highlightning themes weren't displayed correctly because our styles are overwriting color information. Another advantage is the huge list of supported languages which by far exceeds our current list. On the downside, this is a breaking change because our current color theme isn't supported by Hugo.
This commit is contained in:
Sören Weber
parent
540bd91fbc
commit
5c667b3d07
9 changed files with 35 additions and 253 deletions
|
|
@ -24,6 +24,10 @@ relativeURLs = true
|
|||
[outputs]
|
||||
home = ["HTML", "RSS", "JSON"]
|
||||
|
||||
[markup]
|
||||
[markup.highlight]
|
||||
style = "monokai"
|
||||
|
||||
[markup.goldmark.renderer]
|
||||
unsafe= true
|
||||
|
||||
|
|
|
|||
|
|
@ -4,29 +4,29 @@ title: Code highlighting
|
|||
weight: 16
|
||||
---
|
||||
|
||||
Relearn theme uses [highlight.js](https://highlightjs.org/) to provide code syntax highlighting.
|
||||
Relearn theme uses [Hugos build in syntax highlighting](https://gohugo.io/content-management/syntax-highlighting/) for code.
|
||||
|
||||
## Markdown syntax
|
||||
|
||||
Wrap the code block with three backticks and the name of the language. Highlight will try to auto detect the language if one is not provided.
|
||||
|
||||
<!-- markdownlint-disable MD046 -->
|
||||
```plaintext
|
||||
```json
|
||||
[
|
||||
{
|
||||
"title": "apples",
|
||||
"count": [12000, 20000],
|
||||
"description": {"text": "...", "sensitive": false}
|
||||
},
|
||||
{
|
||||
"title": "oranges",
|
||||
"count": [17500, null],
|
||||
"description": {"text": "...", "sensitive": false}
|
||||
}
|
||||
]
|
||||
```
|
||||
````plaintext
|
||||
```json
|
||||
[
|
||||
{
|
||||
"title": "apples",
|
||||
"count": [12000, 20000],
|
||||
"description": {"text": "...", "sensitive": false}
|
||||
},
|
||||
{
|
||||
"title": "oranges",
|
||||
"count": [17500, null],
|
||||
"description": {"text": "...", "sensitive": false}
|
||||
}
|
||||
]
|
||||
```
|
||||
````
|
||||
<!-- markdownlint-disable MD046 -->
|
||||
|
||||
Renders to:
|
||||
|
|
@ -48,42 +48,14 @@ Renders to:
|
|||
|
||||
## Supported languages
|
||||
|
||||
Relearn theme ships with its own version of highlight.js to support offline browsing. The included package supports 38 common languages, as described on the [highlight.js download page](https://highlightjs.org/download/).
|
||||
Hugo comes with a [remarkable list](https://gohugo.io/content-management/syntax-highlighting/) of supported languages.
|
||||
|
||||
## Identifying failed language detection
|
||||
## Configuration
|
||||
|
||||
Highlight will write a warning to the browser console if a requested language was not found. For example, the following code block references an imaginary language `foo`. An error will be output to the console on this page.
|
||||
You can choose a color theme from the [list of supported themes](https://xyproto.github.io/splash/docs/all.html) and add it in your `config.toml`
|
||||
|
||||
```plaintext
|
||||
```foo
|
||||
bar
|
||||
```
|
||||
```
|
||||
|
||||
```nohighlight
|
||||
Could not find the language 'foo', did you forget to load/include a language module?(anonymous) @ highlight.pack.js
|
||||
```
|
||||
|
||||
## Supporting additional languages
|
||||
|
||||
To support languages other than the 38 common languages included in the default highlight.js you will need to download your own version of highlight.js and add it to your site content.
|
||||
|
||||
### Download custom highlight.js
|
||||
|
||||
Visit [https://highlightjs.org/download/](https://highlightjs.org/download/) and select your desired language support. Note that more languages means greater package size.
|
||||
|
||||
### Add custom highlight.js to static resources
|
||||
|
||||
Inside the zip archive downloaded from highlight.js extract the file named `highlight.pack.js`. Move this file to the **new** location
|
||||
|
||||
```nohighlight
|
||||
static/js/highlight.pack.js
|
||||
```
|
||||
|
||||
**Do not** replace the existing file at `themes/hugo-theme-relearn/static/js/highlight.pack.js`.
|
||||
|
||||
Including the file in the correct path will override the theme default highlight.pack.js and prevent issues caused in the future if the theme default file is updated.
|
||||
|
||||
## Further usage information
|
||||
|
||||
See [https://highlightjs.org/usage/](https://highlightjs.org/usage/)
|
||||
````toml
|
||||
[markup]
|
||||
[markup.highlight]
|
||||
style = "monokai"
|
||||
````
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
{{ $assetBusting := not .Site.Params.disableAssetsBusting }}
|
||||
<link href="{{"css/nucleus.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
|
||||
<link href="{{"css/fontawesome-all.min.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
|
||||
<link href="{{"css/hybrid.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
|
||||
<link href="{{"css/featherlight.min.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
|
||||
<link href="{{"css/perfect-scrollbar.min.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
|
||||
<link href="{{"css/theme.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
|
||||
|
|
|
|||
|
|
@ -62,8 +62,6 @@
|
|||
<script src="{{"js/jquery.sticky.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
|
||||
<script src="{{"js/jquery.svg.pan.zoom.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
|
||||
<script src="{{"js/featherlight.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
|
||||
<script src="{{"js/highlight.pack.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
|
||||
<script>hljs.initHighlightingOnLoad();</script>
|
||||
<script src="{{"js/modernizr.custom-3.6.0.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
|
||||
{{ if (or (and (ne .Params.disableMermaid nil) (not .Params.disableMermaid)) (not .Site.Params.disableMermaid)) }}
|
||||
{{ if isset .Params "custommermaidurl" }}
|
||||
|
|
|
|||
|
|
@ -11,11 +11,9 @@
|
|||
{{ $assetBusting := not .Site.Params.disableAssetsBusting }}
|
||||
<link href="{{"css/nucleus.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
|
||||
<link href="{{"css/fontawesome-all.min.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
|
||||
<link href="{{"css/hybrid.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
|
||||
<link href="{{"css/featherlight.min.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
|
||||
<link href="{{"css/perfect-scrollbar.min.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
|
||||
<link href="{{"css/auto-complete.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
|
||||
<link href="{{"css/atom-one-dark-reasonable.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
|
||||
<link href="{{"css/theme.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
|
||||
<link href="{{"css/tabs.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
|
||||
<link href="{{"css/hugo-theme.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
|
||||
|
|
|
|||
|
|
@ -1,77 +0,0 @@
|
|||
/*
|
||||
|
||||
Atom One Dark With support for ReasonML by Gidi Morris, based off work by Daniel Gamage
|
||||
|
||||
Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
|
||||
|
||||
*/
|
||||
.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 0.5em;
|
||||
line-height: 1.3em;
|
||||
color: #abb2bf;
|
||||
background: #282c34;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.hljs-keyword, .hljs-operator {
|
||||
color: #F92672;
|
||||
}
|
||||
.hljs-pattern-match {
|
||||
color: #F92672;
|
||||
}
|
||||
.hljs-pattern-match .hljs-constructor {
|
||||
color: #61aeee;
|
||||
}
|
||||
.hljs-function {
|
||||
color: #61aeee;
|
||||
}
|
||||
.hljs-function .hljs-params {
|
||||
color: #A6E22E;
|
||||
}
|
||||
.hljs-function .hljs-params .hljs-typing {
|
||||
color: #FD971F;
|
||||
}
|
||||
.hljs-module-access .hljs-module {
|
||||
color: #7e57c2;
|
||||
}
|
||||
.hljs-constructor {
|
||||
color: #e2b93d;
|
||||
}
|
||||
.hljs-constructor .hljs-string {
|
||||
color: #9CCC65;
|
||||
}
|
||||
.hljs-comment, .hljs-quote {
|
||||
color: #b18eb1;
|
||||
font-style: italic;
|
||||
}
|
||||
.hljs-doctag, .hljs-formula {
|
||||
color: #c678dd;
|
||||
}
|
||||
.hljs-section, .hljs-name, .hljs-selector-tag, .hljs-deletion, .hljs-subst {
|
||||
color: #e06c75;
|
||||
}
|
||||
.hljs-literal {
|
||||
color: #56b6c2;
|
||||
}
|
||||
.hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute, .hljs-meta-string {
|
||||
color: #98c379;
|
||||
}
|
||||
.hljs-built_in, .hljs-class .hljs-title {
|
||||
color: #e6c07b;
|
||||
}
|
||||
.hljs-attr, .hljs-variable, .hljs-template-variable, .hljs-type, .hljs-selector-class, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-number {
|
||||
color: #d19a66;
|
||||
}
|
||||
.hljs-symbol, .hljs-bullet, .hljs-link, .hljs-meta, .hljs-selector-id, .hljs-title {
|
||||
color: #61aeee;
|
||||
}
|
||||
.hljs-emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
.hljs-strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
.hljs-link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
|
@ -1,102 +0,0 @@
|
|||
/*
|
||||
|
||||
vim-hybrid theme by w0ng (https://github.com/w0ng/vim-hybrid)
|
||||
|
||||
*/
|
||||
|
||||
/*background color*/
|
||||
.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 0.5em;
|
||||
background: #1d1f21;
|
||||
}
|
||||
|
||||
/*selection color*/
|
||||
.hljs::selection,
|
||||
.hljs span::selection {
|
||||
background: #373b41;
|
||||
}
|
||||
|
||||
.hljs::-moz-selection,
|
||||
.hljs span::-moz-selection {
|
||||
background: #373b41;
|
||||
}
|
||||
|
||||
/*foreground color*/
|
||||
.hljs {
|
||||
color: #c5c8c6;
|
||||
}
|
||||
|
||||
/*color: fg_yellow*/
|
||||
.hljs-title,
|
||||
.hljs-name {
|
||||
color: #f0c674;
|
||||
}
|
||||
|
||||
/*color: fg_comment*/
|
||||
.hljs-comment,
|
||||
.hljs-meta,
|
||||
.hljs-meta .hljs-keyword {
|
||||
color: #707880;
|
||||
}
|
||||
|
||||
/*color: fg_red*/
|
||||
.hljs-number,
|
||||
.hljs-symbol,
|
||||
.hljs-literal,
|
||||
.hljs-deletion,
|
||||
.hljs-link {
|
||||
color: #cc6666
|
||||
}
|
||||
|
||||
/*color: fg_green*/
|
||||
.hljs-string,
|
||||
.hljs-doctag,
|
||||
.hljs-addition,
|
||||
.hljs-regexp,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-pseudo {
|
||||
color: #b5bd68;
|
||||
}
|
||||
|
||||
/*color: fg_purple*/
|
||||
.hljs-attribute,
|
||||
.hljs-code,
|
||||
.hljs-selector-id {
|
||||
color: #b294bb;
|
||||
}
|
||||
|
||||
/*color: fg_blue*/
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag,
|
||||
.hljs-bullet,
|
||||
.hljs-tag {
|
||||
color: #81a2be;
|
||||
}
|
||||
|
||||
/*color: fg_aqua*/
|
||||
.hljs-subst,
|
||||
.hljs-variable,
|
||||
.hljs-template-tag,
|
||||
.hljs-template-variable {
|
||||
color: #8abeb7;
|
||||
}
|
||||
|
||||
/*color: fg_orange*/
|
||||
.hljs-type,
|
||||
.hljs-built_in,
|
||||
.hljs-builtin-name,
|
||||
.hljs-quote,
|
||||
.hljs-section,
|
||||
.hljs-selector-class {
|
||||
color: #de935f;
|
||||
}
|
||||
|
||||
.hljs-emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -643,19 +643,18 @@ code.copy-to-clipboard-inline {
|
|||
pre {
|
||||
padding: 1rem;
|
||||
margin: 2rem 0;
|
||||
background: #282c34;
|
||||
border: 0;
|
||||
border-radius: 2px;
|
||||
line-height: 1.15;
|
||||
}
|
||||
pre code {
|
||||
color: whitesmoke;
|
||||
background: inherit;
|
||||
white-space: inherit;
|
||||
background-color: inherit;
|
||||
color: inherit;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
white-space: inherit;
|
||||
}
|
||||
hr {
|
||||
border-bottom: 4px solid #F0F2F4;
|
||||
|
|
@ -904,9 +903,6 @@ td {
|
|||
overflow: auto;
|
||||
position: relative;
|
||||
}
|
||||
.hljs::selection, .hljs span::selection {
|
||||
background: #b7b7b7;
|
||||
}
|
||||
.lightbox-active #body {
|
||||
overflow: visible;
|
||||
}
|
||||
|
|
@ -1073,7 +1069,7 @@ td {
|
|||
border-color: #B19F7A;
|
||||
}
|
||||
pre .copy-to-clipboard {
|
||||
background-color: #C1C4C6;
|
||||
background-color: rgba( 204, 204, 204, .666 );
|
||||
border-color: #000;
|
||||
padding: 10.5px 13.5px;
|
||||
position: absolute;
|
||||
|
|
@ -1082,7 +1078,7 @@ pre .copy-to-clipboard {
|
|||
}
|
||||
pre .copy-to-clipboard:hover {
|
||||
border-color: #505050;
|
||||
background-color: #E6E9EB;
|
||||
background-color: rgba( 236, 236, 236, .9 );
|
||||
}
|
||||
.parent-element {
|
||||
-webkit-transform-style: preserve-3d;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue