Prism Code Highlighting Showcase
This theme uses Prism for code highlighting. Other Hugo themes usually include a pre-configured version of Prism, which complicates updates and clutters the source code base with third-party JavaScript.
Only the Prism features you select in the Hugo site configuration are bundled by
the build process. This way, Prism can be easily updated with npm and the size
of the JavaScript and CSS bundles are minimized by only including what you need.
Here is a an example configuration demonstrating how to configure languages
and plugins in the hugo.toml file of your Hugo site:
[params]
[params.prism]
languages = [
"markup",
"css",
"clike",
"javascript"
]
plugins = [
"normalize-whitespace",
"toolbar",
"copy-to-clipboard"
]
Languages
The following languages are available:
abap
abnf
actionscript
ada
agda
al
antlr4
apacheconf
apex
apl
applescript
aql
arduino
arff
armasm
arturo
asciidoc
asm6502
asmatmel
aspnet
autohotkey
autoit
avisynth
avro-idl
awk
bash
basic
batch
bbcode
bbj
bicep
birb
bison
bnf
bqn
brainfuck
brightscript
bro
bsl
c
cfscript
chaiscript
cil
cilkc
cilkcpp
clike
clojure
cmake
cobol
coffeescript
concurnas
cooklang
coq
core
cpp
crystal
csharp
cshtml
csp
css-extras
css
csv
cue
cypher
d
dart
dataweave
dax
dhall
diff
django
dns-zone-file
docker
dot
ebnf
editorconfig
eiffel
ejs
elixir
elm
erb
erlang
etlua
excel-formula
factor
false
firestore-security-rules
flow
fortran
fsharp
ftl
gap
gcode
gdscript
gedcom
gettext
gherkin
git
glsl
gml
gn
go-module
go
gradle
graphql
groovy
haml
handlebars
haskell
haxe
hcl
hlsl
hoon
hpkp
hsts
http
ichigojam
icon
icu-message-format
idris
iecst
ignore
inform7
ini
io
j
java
javadoc
javadoclike
javascript
javastacktrace
jexl
jolie
jq
js-extras
js-templates
jsdoc
json
json5
jsonp
jsstacktrace
jsx
julia
keepalived
keyman
kotlin
kumir
kusto
latex
latte
less
lilypond
linker-script
liquid
lisp
livescript
llvm
log
lolcode
lua
magma
makefile
markdown
markup-templating
markup
mata
matlab
maxscript
mel
mermaid
metafont
mizar
mongodb
monkey
moonscript
n1ql
n4js
nand2tetris-hdl
naniscript
nasm
neon
nevod
nginx
nim
nix
nsis
objectivec
ocaml
odin
opencl
openqasm
oz
parigp
parser
pascal
pascaligo
pcaxis
peoplecode
perl
php-extras
php
phpdoc
plant-uml
plsql
powerquery
powershell
processing
prolog
promql
properties
protobuf
psl
pug
puppet
pure
purebasic
purescript
python
q
qml
qore
qsharp
r
racket
reason
regex
rego
renpy
rescript
rest
rip
roboconf
robotframework
ruby
rust
sas
sass
scala
scheme
scss
shell-session
smali
smalltalk
smarty
sml
solidity
solution-file
soy
sparql
splunk-spl
sqf
sql
squirrel
stan
stata
stylus
supercollider
swift
systemd
t4-cs
t4-templating
t4-vb
tap
tcl
textile
toml
tremor
tsx
tt2
turtle
twig
typescript
typoscript
unrealscript
uorazor
uri
v
vala
vbnet
velocity
verilog
vhdl
vim
visual-basic
warpscript
wasm
web-idl
wgsl
wiki
wolfram
wren
xeora
xml-doc
xojo
xquery
yaml
yang
zig
Plugins
Before using a plugin in production, read its documentation and test it
thoroughly. E.g., the
remove-initial-line-feed plugin
is still available despite being deprecated in favor of
normalize-whitespace.
Many Prism plugins require using <pre> tags with custom attributes. Hugo uses
Goldmark as Markdown handler, which by default doesn’t render raw inline HTML,
so make sure to enable
unsafe
rendering if required:
[markup]
[markup.goldmark]
[markup.goldmark.renderer]
unsafe = true
The following plugins are available:
autolinker
autoloader
command-line
copy-to-clipboard
custom-class
data-uri-highlight
diff-highlight
download-button
file-highlight
filter-highlight-all
highlight-keywords
inline-color
jsonp-highlight
keep-markup
line-highlight
line-numbers
match-braces
normalize-whitespace
previewers
remove-initial-line-feed
show-invisibles
show-language
toolbar
treeview
unescaped-markup
wpd
Examples
Copy to Clipboard
copy-to-clipboard requires the toolbar plugin, so make sure to add it
after adding toolbar in the hugo.toml file:
Config:
[params.prism]
# ...
plugins = [
"toolbar",
"copy-to-clipboard"
]
Line Numbers
Config:
[params.prism]
plugins = [
"line-numbers"
]
Input:
<pre class="line-numbers">
<code>
Example
</code>
</pre>
Output:
Hello,
World!
Foo
Bar
Command Line
Config:
[params.prism]
languages = [
"bash"
]
plugins = [
"command-line"
]
Input:
<pre class="command-line language-bash" data-user="root" data-host="localhost">
<code>
cd /usr/local/etc
cp php.ini php.ini.bak
vi php.ini
</code>
</pre>
<pre
class="command-line language-bash"
data-user="chris"
data-host="remotehost"
data-output="2, 4-8"
>
<code>
pwd
/usr/home/chris/bin
ls -la
total 2
drwxr-xr-x 2 chris chris 11 Jan 10 16:48 .
drwxr--r-x 45 chris chris 92 Feb 14 11:10 ..
-rwxr-xr-x 1 chris chris 444 Aug 25 2013 backup
-rwxr-xr-x 1 chris chris 642 Jan 17 14:42 deploy
</code>
</pre>
Output:
cd /usr/local/etc
cp php.ini php.ini.bak
vi php.ini
pwd
/usr/home/chris/bin
ls -la
total 2
drwxr-xr-x 2 chris chris 11 Jan 10 16:48 .
drwxr--r-x 45 chris chris 92 Feb 14 11:10 ..
-rwxr-xr-x 1 chris chris 444 Aug 25 2013 backup
-rwxr-xr-x 1 chris chris 642 Jan 17 14:42 deploy
Diff Highlight
Config:
[params.prism]
languages = [
"javascript",
"diff"
]
plugins = [
"diff-highlight"
]
Input:
<pre class="language-diff-javascript diff-highlight">
<code>
@@ -4,6 +4,5 @@
- let foo = bar.baz([1, 2, 3]);
- foo = foo + 1;
+ const foo = bar.baz([1, 2, 3]) + 1;
console.log(`foo: ${foo}`);
</code>
</pre>
Output:
@@ -4,6 +4,5 @@
- let foo = bar.baz([1, 2, 3]);
- foo = foo + 1;
+ const foo = bar.baz([1, 2, 3]) + 1;
console.log(`foo: ${foo}`);