Hugo Code Block Panel Module
Donate
Become a backer or sponsor to support our work.
On this page
Sponsors
A simple code block panel module for Hugo, which includes expand toggle, code copy button, line number toggle and wrap toggle.
| Module | github.com/hugomods/code-block-panel |
|---|---|
| Stats | 
 |
Features
- Expand toggle.
- Copy code.
- Line number toggle.
- Wrap toggle.
Installation
1.Import the Module
hugo.yaml
1module:
2 imports:
3 - path: github.com/hugomods/code-block-panel
hugo.toml
1[module]
2 [[module.imports]]
3 path = 'github.com/hugomods/code-block-panel'
hugo.json
1{
2 "module": {
3 "imports": [
4 {
5 "path": "github.com/hugomods/code-block-panel"
6 }
7 ]
8 }
9}
2. Required Configuration
The module requires the following configuration to be set as corresponding values.
hugo.yaml
1markup:
2 highlight:
3 lineNos: true
4 lineNumbersInTable: false
hugo.toml
1[markup]
2 [markup.highlight]
3 lineNos = true
4 lineNumbersInTable = false
hugo.json
1{
2 "markup": {
3 "highlight": {
4 "lineNos": true,
5 "lineNumbersInTable": false
6 }
7 }
8}
3. Import CSS
You’ll need import two SCSS files first.
1// assets/main.scss
2@import "mods/snackbar/scss/index"; // used to show the result of copying code.
3@import "mods/code-block-panel/scss/index";
The import paths is relative to the
assetsfolder.
And then transform it to CSS in partial.
1{{ $css := resources.Get "main.scss" }}
2{{ $css = $css | toCSS }}
3<link rel="stylesheet" href="{{ $css.RelPermalink }}" />
4. Import JS
You can import JS via either Hugo Pipes or Partial.
4.1 Import JS via Hugo Pipes
1{{ $js := resources.Get "main.ts" | js.Build }}
2{{ $codeJS := partialCached "code-block-panel/assets/js-resource" . }}
3{{ $js = slice $js $searchJS | resources.Concat "js/main.js" }}
4<script src="{{ $js.RelPermalink }}" defer></script>
4.1 Import JS via Partial
1{{ partialCached "code-block-panel/assets/js" . }}
Site Parameters
hugo.yaml
1params:
2 code_block_panel:
3 max_lines: 10
hugo.toml
1[params]
2 [params.code_block_panel]
3 max_lines = 10
hugo.json
1{
2 "params": {
3 "code_block_panel": {
4 "max_lines": 10
5 }
6 }
7}
| Name | Type | Default | Description |
|---|---|---|---|
line_nos | boolean | true | Show/Hide the line numbers by default. |
max_lines | number | 10 | The max visible lines. |
wrap | boolean | false | When true, wrap the code by default. |
Code Block Attributes
You can override the site parameters for particular code block by adding data attributes to the code block.
| Name | Type | Default | Description |
|---|---|---|---|
data-expand | boolean | - | Whether to expand the code by default, true/1 means expand, false/0 means not expand. |
data-line-nos | boolean | - | Whether to show line numbers by default, true/1 means enabled, false/0 means disabled. |
data-max-lines | number | - | The maximum number of lines to show. |
data-wrap | boolean | - | Whether to wrap the code by default, true/1 or false/0. |
1```text {data-expand=true data-line-nos=false data-max-lines=3 data-wrap=true}
2LINE 1
3LINE 2
4LINE 3
5LINE 4
6LINE 5
7```
Examples
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>Hugo Code Block Panel Module Example</title>
5 </head>
6 <body>
7 <div class="lead">
8 Hello world!
9 </div>
10 <p>
11 A very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog text for showing how the wrap toggle work.
12 </p>
13 </body>
14</html>