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 config.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:
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 config.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:
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:
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: