* fix: fix CSS issue with gist embeds * Addressing PR comments * remove newline * simplify selector and add example * fix spellcheck * fix markdownlint Co-authored-by: Robert Kaussow <mail@thegeeklab.de>
2.2 KiB
title |
---|
Code Blocks |
There are several ways to add code blocks. Most of them work out of the box, only the Hugo shortcode <highlight>
needs to be configured to work properly. The theme also provides some additional features like a copy button and an option to set the maximum length of code blocks. Both of these functions and the dependent formatting rely on the .highlight
CSS class. You must ensure that you always assign a language to your code blocks if you want to use these functions. If you do not want to apply syntax highlighting, you can also specify plain
or text
as the language.
{{< toc >}}
Inline code
To display an inline shortcode use single quotes:
`some code`
Example: some code
with a link
Code blocks
Code blocks can be uses without language specification:
```Plain
some code
```
Example:
some code
... or if you need language specific syntax highlighting:
```Shell
# some code
echo "Hello world"
```
Example:
# some code
echo "Hello World"
Highlight shortcode
Hugo has a build-in shortcode for syntax highlighting. To work properly with this theme, you have to set following options in your site configuration:
{{< tabs "uniqueid" >}} {{< tab "TOML" >}}
pygmentsUseClasses=true
pygmentsCodeFences=true
{{< /tab >}} {{< tab "YAML" >}}
pygmentsUseClasses: true
pygmentsCodeFences: true
{{< /tab >}} {{< /tabs >}}
You can use it like every other shortcode:
{{</* highlight Shell "linenos=table" */>}}
# some code
echo "Hello World"
{{</* /highlight */>}}
Example:
{{< highlight Shell "linenos=table" >}}
some code
echo "Hello World" {{< /highlight >}}
Gist Shortcode
The Gist shortcode is a built-in Hugo shortcode to load GitHub gists. For details usage information please check the Hugo documentation.
{{</* gist spf13 7896402 */>}}
Example:
{{< gist spf13 7896402 >}}