{{ if eq .Site.Params.hljs_style "light" }}
<link rel="stylesheet" href="{{ print "highlight/styles/light/" .Site.Params.hljs_style_light ".min.css" | relURL }}">
{{ end }}
{{ if eq .Site.Params.hljs_style "dark" }}
<link rel="stylesheet" href="{{ print "highlight/styles/dark/" .Site.Params.hljs_style_dark ".min.css" | relURL }}">
{{ end }}
<script src="{{ "highlight/highlight.min.js" | relURL }}"></script>
<script>hljs.initHighlightingOnLoad();</script>
Theme Test
Theme colors
These are the theme colors. The colors bg-color-0
, fg-color-0
and fg-color-1
are the 3 primary theme colors which you set. Then all of the other remaining colors are auto-generated from those 3 primary theme colors.
Background
Foreground
--bg-color-0
--fg-color-0
--bg-color-1
--fg-color-1
--bg-color-2
--fg-color-2
--bg-color-3
--fg-color-3
--bg-color-4
--fg-color-4
--bg-color-5
--fg-color-5
--bg-color-6
--fg-color-6
--bg-color-7
--fg-color-7
If you want to change the theme colors properly, you will need to install the node.js dependancies with npm install
which should then create a local node_modules/
subfolder. And populate it with all the build time dependancies required for running gulp
allongside hugo concurrently. However if you cannot get the toolchain working, then you can instead peek the color trasform operations in the postcss file, and just calculate the derived colors yourself manually. Using the help of a color scheme website. And type them directly into the styles.css
file. However doing this breaks the postcss build chain.
Source Code Highlighting
The syntax highlighting css theme file is specified at the top of the template file layouts/_default/baseof.html
lines 17-28. Where it says:
You can choose a light background color, or a dark background color. This choice is set in your config.toml
. In [Params]
named hljs_style
. Just set it to light
or dark
. For example:
# hljs_style = "light"
hljs_style = "dark"
# highlightjs - light themes
hljs_style_light = "gruvbox-light"
# hljs_style_light = "kimbie.light"
# hljs_style_light = "purebasic"
# hljs_style_light = "solarized-light"
# highlightjs - dark themes
# hljs_style_dark = "atom-one-dark"
hljs_style_dark = "gruvbox-dark"
# hljs_style_dark = "hopscotch"
# hljs_style_dark = "kimbie.dark"
# hljs_style_dark = "ocean"
# hljs_style_dark = "solarized-dark"
# hljs_style_dark = "tomorrow-night-eighties"
# hljs_style_dark = "zenburn"
Now for some code to look at
Included external source file
#!/bin/bash
i=0
while [ $i -lt 2000000 ]
do
echo offset=$i
i=$(($i+1000))
done
Inline source code block
# http://prismjs.com/plugins/line-highlight/
<mark class="highlight-inline">highlight code listings</mark>
# *Source* block
# Use: <mark class="highlight-inline">highlight code listings</mark>
# (require `source-highlight` or `pygmentize`)
ls -lsa
touch "foo"
for i in one two three; do
echo $i
done
echo $HOME
Quotation / Quotes
Four score and seven years ago our fathers brought forth
on this continent a new nation…
— Abraham Lincoln
Address delivered at the dedication of the Cemetery at Gettysburg
A person who never made a mistake never tried anything new. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
— Albert Einstein
A person who never made a mistake never tried anything new.
If you don’t know where you are going, any road will get you there.
— Charles Lutwidge Dodgson
Mathematician and author, also known as Lewis Carroll
Theme colors
These are the theme colors. The colors bg-color-0
, fg-color-0
and fg-color-1
are the 3 primary theme colors which you set. Then all of the other remaining colors are auto-generated from those 3 primary theme colors.
Background | Foreground |
--bg-color-0 | --fg-color-0 |
--bg-color-1 | --fg-color-1 |
--bg-color-2 | --fg-color-2 |
--bg-color-3 | --fg-color-3 |
--bg-color-4 | --fg-color-4 |
--bg-color-5 | --fg-color-5 |
--bg-color-6 | --fg-color-6 |
--bg-color-7 | --fg-color-7 |
If you want to change the theme colors properly, you will need to install the node.js dependancies with npm install which should then create a local node_modules/ subfolder. And populate it with all the build time dependancies required for running gulp allongside hugo concurrently. However if you cannot get the toolchain working, then you can instead peek the color trasform operations in the postcss file, and just calculate the derived colors yourself manually. Using the help of a color scheme website. And type them directly into the styles.css file. However doing this breaks the postcss build chain.
|
Source Code Highlighting
The syntax highlighting css theme file is specified at the top of the template file layouts/_default/baseof.html
lines 17-28. Where it says:
You can choose a light background color, or a dark background color. This choice is set in your config.toml
. In [Params]
named hljs_style
. Just set it to light
or dark
. For example:
# hljs_style = "light"
hljs_style = "dark"
# highlightjs - light themes
hljs_style_light = "gruvbox-light"
# hljs_style_light = "kimbie.light"
# hljs_style_light = "purebasic"
# hljs_style_light = "solarized-light"
# highlightjs - dark themes
# hljs_style_dark = "atom-one-dark"
hljs_style_dark = "gruvbox-dark"
# hljs_style_dark = "hopscotch"
# hljs_style_dark = "kimbie.dark"
# hljs_style_dark = "ocean"
# hljs_style_dark = "solarized-dark"
# hljs_style_dark = "tomorrow-night-eighties"
# hljs_style_dark = "zenburn"
Now for some code to look at
#!/bin/bash
i=0
while [ $i -lt 2000000 ]
do
echo offset=$i
i=$(($i+1000))
done
# http://prismjs.com/plugins/line-highlight/
<mark class="highlight-inline">highlight code listings</mark>
# *Source* block
# Use: <mark class="highlight-inline">highlight code listings</mark>
# (require `source-highlight` or `pygmentize`)
ls -lsa
touch "foo"
for i in one two three; do
echo $i
done
echo $HOME
Quotation / Quotes
Four score and seven years ago our fathers brought forth on this continent a new nation…
Address delivered at the dedication of the Cemetery at Gettysburg
A person who never made a mistake never tried anything new. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
A person who never made a mistake never tried anything new.
If you don’t know where you are going, any road will get you there.
Mathematician and author, also known as Lewis Carroll