Docs
The docs shortcode captures a code snippet from a supported input file.
The docs shortcode captures a code snippet from a toml or scss input file. It scans for named markers in a local file. The snippet between the two markers is then rendered using syntax highlighting.
title = "Hinode"
copyright = "Copyright © 2023 Mark Dumay."
paginate = 9
enableGitInfo = true{{< docs name="main" file="config/_default/hugo.toml" id="docs-collapse-1" >}}id field fails when embedding (multiple) docs shortcodes in an example. Provide an explicit, unique id to prevent cross-interference.The shortcode supports the following arguments:
| Argument | Required | Description |
|---|---|---|
| name | Yes | Name of the code snippet, used to identify the relevant section of the input file. |
| file | Yes | Path of the input file. The path is relative to the basePath defined in the docs section of the site’s parameters (see page layout). If the file starts with ./, the path of the repository is used as base path instead. |
| show | No | If unset, shows the panel with the code snippet in collapsed state. By default, the panel is expanded. |
| full | No | If unset, shows the filename only. By default, the full relative path is shown. |
| id | No | Optional id of the collapse panel, defaults to “docs-collapse-n” with a sequential number n starting at 1. |
| class | No | Optional class argument of the tab control. |
The docs shortcode supports .toml and .scss file formats. Use a marker to denote the start and end of a code snippet:
.toml files, use # toml-docs-start and # toml-docs-end followed by the snippet name.scss files, use // scss-docs-start and // scss-docs-end followed by the snippet nameClick on one the tabs to see a full example of an input file.
Change the style and language of your code snippet with shortcode arguments.
Use the name and file arguments to refer to a code snippet of a file. By default, the shortcode uses the site’s basePath (see page layout for more information).
title = "Hinode"
copyright = "Copyright © 2023 Mark Dumay."
paginate = 9
enableGitInfo = true{{< docs name="main" file="config/_default/hugo.toml" id="docs-collapse-2" >}}Provide a path that starts with ./ to use the path of the repository as base path instead.
.card-shrink {
transition: 0.3s transform cubic-bezier(0.155, 1.105, 0.295, 1.12), 0.3s box-shadow, 0.3s -webkit-transform cubic-bezier(0.155, 1.105, 0.295, 1.12);
cursor: pointer;
}
.card-shrink:hover {
transform: scale(0.99);
box-shadow: none if($enable-important-utilities, !important, null);
}{{< docs name="styling" file="./assets/scss/theme/theme.scss" id="docs-collapse-3" >}}Set show to false to hide the code snippet on page load. The code is reveiled when clicking the tab control.
.card-shrink {
transition: 0.3s transform cubic-bezier(0.155, 1.105, 0.295, 1.12), 0.3s box-shadow, 0.3s -webkit-transform cubic-bezier(0.155, 1.105, 0.295, 1.12);
cursor: pointer;
}
.card-shrink:hover {
transform: scale(0.99);
box-shadow: none if($enable-important-utilities, !important, null);
}{{< docs name="styling" show="false" file="./assets/scss/theme/theme.scss" id="docs-collapse-4" >}}Set full to false to show the filename only.
.card-shrink {
transition: 0.3s transform cubic-bezier(0.155, 1.105, 0.295, 1.12), 0.3s box-shadow, 0.3s -webkit-transform cubic-bezier(0.155, 1.105, 0.295, 1.12);
cursor: pointer;
}
.card-shrink:hover {
transform: scale(0.99);
box-shadow: none if($enable-important-utilities, !important, null);
}{{< docs name="styling" full="false" file="./assets/scss/theme/theme.scss" id="docs-collapse-5" >}}