Browse Docs

Hugo Code Block Panel Module

HugoMods Authors March 29, 2023 2 min read Module Docs Code Block
On this page
Donate
Hugo Code Block Panel Module

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
GitHub Stars Used By Used By Used By Used By

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 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 }}" />

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}
NameTypeDefaultDescription
line_nosbooleantrueShow/Hide the line numbers by default.
max_linesnumber10The max visible lines.
wrapbooleanfalseWhen true, wrap the code by default.

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>