Code Block Annotation
This module lets you add a name, file path, language, and notes to a codeblock on a Hugo site.
Table of Contents
Installation
Before you can begin, make sure that your Hugo site has been initialized as a module.
In your Hugo config, add this:
Hugo site config
[module]
[[module.imports]]
path='github.com/koc-he/code-block-annotation'
config.toml
TOML
Hugo will automatically download the module when you build or run your site.
In the <head> tag of your site, add this partial:
Styling partial in head tag
<head>
<!-- Other things in your head tag --->
{{ partial "head/cba-styling.html" . }}
</head>
layouts/_default/baseof.toml
HTML
Usage
You can set can annotate your codeblock with four optional parameters:
name: The name of the code block. This appears at the top of the code block.path: The path to the file containing the code of the block. This appears at the bottom of the code block.show_lang: Whether you’d like to show the language of the code. This appears at the bottom of the code block.note: Any note you would like to leave about the code block. This appears at the bottom of the code block.
Here’s an example of how you’d set these values:
Example annotated code block
```md {path="path/to/the/file.md" note="This is an amazing file. You should try using it." show_lang=true}
# Sample Markdown File
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut tincidunt ipsum, id rhoncus nulla.
Nullam aliquam urna id auctor placerat. Suspendisse erat tortor, dapibus at lacus convallis, iaculis maximus dolor.
Maecenas nibh sapien, venenatis sed gravida vel, rutrum ut felis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
```
plaintext
Here’s a screenshot of the results.
Styling
If you’d like to style the annotation, use these CSS classes.
| Class | Purpose |
|---|---|
.codeblock-container |
The container of the whole block. |
.codeblock-label |
The icons. |
.codeblock-item |
The container that holds the icon and annotation. |