Hugo Theme Stack 修改 CodeBlock

Stack 主題自帶的 CodeBlock，就蠻好看的，複製的功能也有，不過就少了顯示檔名(標題)的功能

搜尋過後發現 Hugo 可以單獨改 CodeBlock 的轉譯，後面就紀錄修改的方式

修改步驟

新增渲染檔案

📂 Folder

my-project/
└── layouts/
    └── _default/
        └── _markup/
            └── render-codeblock.html

新增 render-codeblock.html 檔案，貼入下面內容

不更改原有的 CodeBlock，新增顯示語言類型type跟檔名title

</> html 📄 render-codeblock.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


{{- $label := print .Type " code snippet" -}}
<figure class="code-block" role="figure" aria-label="{{- $label | plainify -}}">
  <div class="code-header">
    {{- with .Type }}
    <span class="code-type">{{ . | markdownify }}</span>
    {{- end -}}

    {{- with .Attributes.title }}
    <span  class="code-title">{{ . | markdownify }}</span>
    {{- end -}}
  </div>
  {{- with transform.HighlightCodeBlock . -}}
    {{ .Wrapped }}
  {{- end -}}
</figure>

新增 SCSS

建立assets/partials/highlight資料夾，新增dark.scss, light.scss, title.scss 3個scss檔

📂 Folder

my-project/
└── assets/
    └── partials/
        └── highlight/
            ├── dark.scss
            ├── light.scss
            └── title.scss

dark.scss 跟 light.scss 主要是為了覆蓋原本主題的scss

加入引用自訂的title.scss，其餘就照貼原本 Stack 主題的設定

如果對CodeBlock的顏色不滿意也可以在這邊改

</> scss 📄 dark.scss

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


/*
*   Style: monokai
*   https://xyproto.github.io/splash/docs/monokai.html
*/

$color: #f8f8f2;
$background-color: #272822;
$error-color: #bb0064;
$keyword-color: #66d9ef;
$text-color: $color;
$name-color: #a6e22e;
$literal-color: #e6db74;

// title colors
$type-color: #4B4376;
$title-color: #432E54;

@import "title.scss";
@import "common.scss";

</> scss 📄 light.scss

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


/*
*   Style: monokailight
*   https://xyproto.github.io/splash/docs/monokailight.html
*/

$color: #272822;
$background-color: #fafafa;
$error-color: #960050;
$keyword-color: #00a8c8;
$text-color: #111111;
$name-color: #75af00;
$literal-color: #d88200;

// title colors
$type-color: #D0E8C5;
$title-color: #C5D3E8;

@import "title.scss";
@import "common.scss";

</> scss 📄 title.scss

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


.code-block {
  .code-header {
    display: table;
    padding-top: 5px;
    padding-right: 5px;
  }

  .code-type {
    position: relative;
    background-color: $type-color;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 0px 15px 15px 0px;
    float: left;
    z-index: 2;
  }

  .code-title {
    position: relative;
    background-color: $title-color;
    padding: 5px;
    padding-right: 10px;
    padding-left: 25px;
    margin-left: -15px;
    border-radius: 0px 15px 15px 0px;
    float: left;
    z-index: 1;
  }
}

這樣就完成了

效果展示

不指定語言類型、檔名

Codeblock 標頭 ```

1
2
3


var a = 0;

console.log(a);

指定語言類型

Codeblock 標頭 ``` javascript

</> javascript

1
2
3


var a = 0;

console.log(a);

指定檔名

Codeblock 標頭 ``` {title=“test.js”}

📄 test.js

1
2
3


var a = 0;

console.log(a);

全都指定

Codeblock 標頭 ``` javascript {title=“test.js”}

</> javascript 📄 test.js

1
2
3


var a = 0;

console.log(a);

terminal 區塊

效果展示

bash

1
2
3


\$ ls

here is some bash output example

</> markdown

1
2
3
4
5


``` terminal  {title="bash"}
\$ ls

here is some bash output example
...

新增 HTML 模版

同場加映，我在這邊有利用shortcode 另外做 termainal 風格的區塊
有需要可以至隔壁篇看 Hugo 短代碼

同樣的效果也可以用 hugo 的特性，用 codeblock 加指定語言做到
Hugo 支援指定不同語言，就自動去找對應的渲染模版
下面範例新增 mermaid 跟 python 模版

📂 Folder

layouts/
└── _default/
    └── _markup/
        ├── render-codeblock-mermaid.html
        ├── render-codeblock-python.html
        └── render-codeblock.html

所以我們只要新增 render-codeblock-terminal.html
就可以區分一般程式碼跟終端機的內容

</> html 📄 render-codeblock-terminal.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


{{- $label := print .Type " code snippet" -}}
<div class="terminal" role="figure" aria-label="{{- $label | plainify -}}">
  <div class="terminal-header">
    <div class="terminal-btn">
      <div class="btn-mac mac-close"></div>
      <div class="btn-mac mac-mini"></div>
      <div class="btn-mac mac-full"></div>
    </div>
    {{ if .Attributes.title }}
    <div class="terminal-title">{{.Attributes.title}}</div>
    {{ else }}
    <div class="terminal-title">terminal</div>
    {{ end }}
  </div>

  {{- with transform.HighlightCodeBlock . -}}
    {{ .Wrapped }}
  {{- end -}}
</div>

新增 SCSS

如果已經有加入 terminal shortcode 這邊就不用改了
下面 SCSS 的內容一模一樣

新增 terminal.scss 放在 my-project/assets/scss/partials/highlight/
程式碼主要參考 codepen 上 Sam Willis 跟 Microk 分享的範例

Sam Willis Pure CSS OSX window
Microk Code Window for MAC OS Style

</> scss 📄 terminal.scss

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87


/* Fira Code: https://github.com/tonsky/FiraCode */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap');

$font-size: 1.5rem;
$line-height: 1.54em;

.terminal {
  border: 1px solid #e6e6e6;
  border-radius: 0.7em;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.1);
  overflow: hidden;

  .terminal-header{
    background-color: $terminal-header;
    color: $terminal-header-font;
    display: grid;
    grid-template-columns: 25% auto 25%;

    .terminal-title {
      -webkit-box-align: center;
      -moz-box-align: center;
      align-items: center;
      display: -moz-box;
      -webkit-box-pack: center;
      -moz-box-pack: center;
      justify-content: center;
      text-align: center;
    }

    .terminal-btn,
    .terminal-cp {
      padding: 0 6px;
    }

    .terminal-btn {
      display: flex;

      .btn-mac {
        width: 15px;
        height: 15px;
        margin: 8px 4px;
        border-radius: 50%;
      }

      .mac-close {
        background-color: #ff5f56;
      }

      .mac-mini {
        background-color: #ffbd2e;
      }

      .mac-full {
        background-color: #27c93f;
      }
    }

    .terminal-cp {
      align-items: center;
    }
  }

  .terminal-block {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Fira Code", Monaco, Consolas, "Ubuntu Mono", monospace;
    font-size: $font-size;
    font-weight: 400;
    font-style: normal;
    line-height: $line-height;
    letter-spacing: -0.01em;
    background-color: $terminal-background;
    color: $terminal-foreground;
    text-rendering: optimizeLegibility;
    /* -webkit-font-smoothing: antialiased; */
    font-feature-settings: "liga", "tnum", "ss01", "locl";
    font-variant-ligatures: contextual;
    -webkit-overflow-scrolling: touch;
    -webkit-text-size-adjust: 100%;

    p {
      padding: 10px;
      margin: 0;
    }
  }
}

然後就是修改 my-project/assets/scss/partials/highlight/ 裡的 dark.scss 跟 light.scss 內分別加入顏色變數還有引用

</> scss 📄 dark.scss

1
2
3
4
5
6
7


// terminal
$terminal-header: #273138;
$terminal-header-font: #ffffff;
$terminal-background: #000000;
$terminal-foreground: #4EEE85;

@import "custom/terminal.scss";

</> scss 📄 light.scss

1
2
3
4
5
6
7


// terminal
$terminal-header: #f4f4f7;
$terminal-header-font: #000000;
$terminal-background: #ffffff;
$terminal-foreground: #000000;

@import "custom/terminal.scss";

info success warning error 4色提示

效果展示

in info
第二行

in success
第二行

in warning
第二行

in error
第二行

</> markdown

1
2
3


``` info
可以將 info 替換為 success, warning, error
第二行

新增 HTML 模版

同樣在 _markup 資料夾內新增4個模版

📂 Folder

my-project/
└── layouts/
    └── _default/
        └── _markup/
            ├── render-codeblock-info.html
            ├── render-codeblock-success.html
            ├── render-codeblock-warning.html
            └── render-codeblock-error.html

這邊模版其實大同小異，只差在 class 跟 svg 圖檔不同
之所以要這樣建四個，而不是用參數調整，是為了在寫 markdown 時可以少打幾個字

</> html 📄 render-codeblock-info.html

1
2
3
4
5
6
7
8
9


<!-- remove first word is newline -->
{{- $lines := (replaceRE `^\n` "" .Inner) -}}

<div class="simple-notice simple-notice-info">
  <div class="simple-notice-title">
    <svg xmlns="http://www.w3.org/2000/svg" class="simple-notice-icon" viewBox="0 0 512 512" fill="currentColor"><path d="M256 8a248 248 0 100 496 248 248 0 000-496zm0 110a42 42 0 110 84 42 42 0 010-84zm56 254c0 7-5 12-12 12h-88c-7 0-12-5-12-12v-24c0-7 5-12 12-12h12v-64h-12c-7 0-12-5-12-12v-24c0-7 5-12 12-12h64c7 0 12 5 12 12v100h12c7 0 12 5 12 12v24z"/></svg>
  </div>
  <p>{{ $lines | markdownify }}</p>
</div>

</> html 📄 render-codeblock-success.html

1
2
3
4
5
6
7
8
9


<!-- remove first word is newline -->
{{- $lines := (replaceRE `^\n` "" .Inner) -}}

<div class="simple-notice simple-notice-success">
  <div class="simple-notice-title">
    <svg xmlns="http://www.w3.org/2000/svg" class="simple-notice-icon" viewBox="0 0 512 512" fill="currentColor"><path d="M504 256a248 248 0 11-496 0 248 248 0 01496 0zM227 387l184-184c7-6 7-16 0-22l-22-23c-7-6-17-6-23 0L216 308l-70-70c-6-6-16-6-23 0l-22 23c-7 6-7 16 0 22l104 104c6 7 16 7 22 0z"/></svg>
  </div>
  <p>{{ $lines | markdownify }}</p>
</div>

</> html 📄 render-codeblock-warning.html

1
2
3
4
5
6
7
8
9


<!-- remove first word is newline -->
{{- $lines := (replaceRE `^\n` "" .Inner) -}}

<div class="simple-notice simple-notice-warning">
  <div class="simple-notice-title">
    <svg xmlns="http://www.w3.org/2000/svg" class="simple-notice-icon" viewBox="0 0 512 512" fill="currentColor"><path d="M504 256a248 248 0 11-496 0 248 248 0 01496 0zm-248 50a46 46 0 100 92 46 46 0 000-92zm-44-165l8 136c0 6 5 11 12 11h48c7 0 12-5 12-11l8-136c0-7-5-13-12-13h-64c-7 0-12 6-12 13z"/></svg>
  </div>
  <p>{{ $lines | markdownify }}</p>
</div>

</> html 📄 render-codeblock-error.html

1
2
3
4
5
6
7
8
9


<!-- remove first word is newline -->
{{- $lines := (replaceRE `^\n` "" .Inner) -}}

<div class="simple-notice simple-notice-error">
  <div class="simple-notice-title">
    <svg xmlns="http://www.w3.org/2000/svg" class="simple-notice-icon" viewBox="0 0 576 512" fill="currentColor"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zM124 296c-6.6.0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h264c6.6.0 12 5.4 12 12v56c0 6.6-5.4 12-12 12H124z"/></svg>
  </div>
  <p>{{ $lines | markdownify }}</p>
</div>

新增 SCSS 檔

加完模版之後就是在 my-project/assets/scss/partials/highlight/ 新增 SCSS

</> scss 📄 notice.scss

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53


.simple-notice {
  position:relative;
  padding: 1em 0 1em 2em;
  margin-bottom: 1em;
  transition: all .5s;
  p:last-child {
      margin-bottom: 0;
  }
  .simple-notice-title {
    position: absolute;
    left: 16px;
    margin-top: 16px;
    font-size: 1.2em;
      .simple-notice-icon {
          width: 1em;
          height: 1em;
          margin-left: -0.8em;
      }
  }

  &.simple-notice-error {
      border-top: 2px solid $notice-error-color;
      color: $notice-error-color;
      a {
          color: $notice-error-color;
          text-decoration-color: $notice-error-color;
      }
  }
  &.simple-notice-warning {
      border-top: 2px solid $notice-warning-color;
      color: $notice-warning-color;
      a {
          color: $notice-warning-color;
          text-decoration-color: $notice-warning-color;
      }
  }
  &.simple-notice-info {
      border-top: 2px solid $notice-info-color;
      color: $notice-info-color;
      a {
          color: $notice-info-color;
          text-decoration-color: $notice-info-color;
      }
  }
  &.simple-notice-success {
      border-top: 2px solid $notice-success-color;
      color: $notice-success-color;
      a {
          color: $notice-success-color;
          text-decoration-color: $notice-success-color;
      }
  }
}

然後在 dark.scss 跟 light.scss 檔內，加上對應的顏色變數跟引用 notice.scss

</> scss 📄 dark.scss

1
2
3
4
5
6
7


// notice
$notice-error-color: hsl(0, 65%, 65%);
$notice-warning-color: hsl(30, 80%, 70%);
$notice-info-color: hsl(200, 65%, 65%);
$notice-success-color: hsl(140, 65%, 65%);

@import "notice.scss";

</> scss 📄 light.scss

1
2
3
4
5
6
7


// notice
$notice-error-color: hsl(0, 100%, 35%);
$notice-warning-color: hsl(40, 80%, 45%);
$notice-info-color: hsl(210, 100%, 25%);
$notice-success-color: hsl(150, 100%, 25%);

@import "notice.scss";

參考

資料

官方文件Code block render hooks

Custom code blocks in Hugo

Labeling Code Blocks in Hugo

Photo by Rahul Mishra on Unsplash