hugo-geekdoc/exampleSite/content/features/code-blocks.md

96 lines
1.4 KiB
Markdown
Raw Normal View History

2021-09-28 18:44:59 +00:00
---
title: Code Blocks
---
2020-05-31 16:17:32 +00:00
There are multiple ways to add code blocks. Most of them works out of the box only the Hugo shortcode `<highlight>` need some configuration to work properly.
2020-01-12 14:33:02 +00:00
{{< toc >}}
2020-01-12 14:33:02 +00:00
## Inline code
2020-06-01 22:01:49 +00:00
2020-01-12 14:33:02 +00:00
To display an inline shortcode use single quotes:
2020-06-01 22:01:49 +00:00
```plain
2020-01-12 14:33:02 +00:00
`some code`
```
**Example:** `some code`
## Code blocks
2020-06-01 22:01:49 +00:00
2020-05-31 16:17:32 +00:00
Code blocks can be uses without language specification:
2020-01-12 14:33:02 +00:00
2020-06-01 22:01:49 +00:00
````markdown
2020-01-12 14:33:02 +00:00
```
some code
```
````
**Example:**
2020-06-01 22:01:49 +00:00
```plain
2020-01-12 14:33:02 +00:00
some code
```
... or if you need language specific syntax highlighting:
2020-06-01 22:01:49 +00:00
````markdown
2020-01-12 14:33:02 +00:00
```Shell
# some code
echo "Hello world"
```
````
**Example:**
```Shell
# some code
echo "Hello World"
```
## Highlight shortcode
2020-05-31 16:17:32 +00:00
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:
2020-01-12 14:33:02 +00:00
{{< tabs "uniqueid" >}}
{{< tab "TOML" >}}
2020-06-01 22:01:49 +00:00
2020-01-12 14:33:02 +00:00
```TOML
pygmentsUseClasses=true
pygmentsCodeFences=true
```
2020-06-01 22:01:49 +00:00
2020-01-12 14:33:02 +00:00
{{< /tab >}}
{{< tab "YAML" >}}
2020-06-01 22:01:49 +00:00
2020-01-12 14:33:02 +00:00
```YAML
pygmentsUseClasses: true
pygmentsCodeFences: true
```
2020-06-01 22:01:49 +00:00
2020-01-12 14:33:02 +00:00
{{< /tab >}}
{{< /tabs >}}
You can use it like every other shortcode:
2020-09-10 20:23:24 +00:00
<!-- prettier-ignore -->
2020-06-01 22:01:49 +00:00
```markdown
2020-01-12 14:33:02 +00:00
{{</* highlight Shell "linenos=table" */>}}
# some code
echo "Hello World"
{{</* /highlight */>}}
```
**Example:**
2020-06-01 22:01:49 +00:00
<!-- markdownlint-disable -->
2020-09-10 20:23:24 +00:00
<!-- prettier-ignore-start -->
2020-01-12 14:33:02 +00:00
{{< highlight Shell "linenos=table" >}}
# some code
echo "Hello World"
{{< /highlight >}}
2020-09-10 20:23:24 +00:00
<!-- prettier-ignore-end-->
2020-06-01 22:01:49 +00:00
<!-- markdownlint-enable -->