Asciidoc Fusion Demo Theme Test Reference Asciidoc cheatsheet AsciiDoc Syntax Markdown Cheatsheet

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:

{{ 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>

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