This module lets you add a name, file path, language, and notes to a codeblock on a Hugo site.
Before you can begin, make sure that your Hugo site has been initialized as a module.
In your Hugo config, add this:
[module]
[[module.imports]]
path='github.com/koc-he/code-block-annotation'Hugo will automatically download the module when you build or run your site.
In the <head> tag of your site, add this partial:
<head>
<!-- Other things in your head tag --->
{{ partial "head/cba-styling.html" . }}
</head>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:
```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.
```
Here's a screenshot of the results.
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. |