Become a backer or sponsor to support our work.
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 |
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}
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}
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
assets
folder.
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 }}" />
You can import JS via either Hugo Pipes or Partial.
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>
1{{ partialCached "code-block-panel/assets/js" . }}
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. |
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>