通过 Markdown Render Hooks | Hugo 实现此功能

1 新建模板

./layouts/_default/_markup/render-codeblock.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

{{- $lang := .Type | default "text" }}
{{- $title := (split (.Attributes.title | default "") ";") }}
{{- $titleText := (trim (index $title 0 | default "") " ") }}
{{- $titleShowName := (trim (index $title 1 | default "true") " ") }}
{{- $titleName := (trim (index $title 2 | default "") " ") }}
<div class="x-highlight-wrapper">
{{- if gt (len $titleText) 0 }}
    <div class="x-highlight-title">
        {{- if eq $titleShowName "true" }}
        <strong>{{- $titleName }}</strong>
        {{- end }}
        {{ $titleText }}
    </div>
{{- end }}
{{ highlight .Inner $lang .Options }}
</div>

2 添加样式

./assets/css/extended/custom.css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

.x-highlight-wrapper :nth-child(2) {
  margin-top: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

/* --hljs-bg 和 --radius 是 PaperMod 主题提供的变量 */
.x-highlight-title {
  background: var(--hljs-bg) !important;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  color: #e7ce56;
  padding: 4px 0 0 16px;
  font-size: .78em;
}

3 使用方式

```html { title=“我是文件名” }

```

我是文件名
1

  代码块加上 title 属性，使用时得加上代码块所属语言

```markdown { title=“我只是个标题;false” }

```

我只是个标题
1

第二个参数控制是否在标题前加前缀，默认值 "true"

```text { title=“loyayz;true;我是：” }

```

我是： loyayz
1

第三个参数是前缀名，无默认值