hugo 仅当代码块超过 1 行时显示行号

#hugo

2025-03-08 16:18:27

最近发现如果代码只有1行，在 chrome 下正常，而在 firefox 里面，行号显示错乱，再三对比 css，也是没发现问题，于是那就不要行号吧。

不要行号有两个解决办法：

  1. 使用 { linenos=false } 来禁用；
  2. 通过配置或自定义代码高亮来实现；

显然，方式二才是解决问题的办法，于是问了下豆包，豆包给出的 codeblock.html 如下：

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

{{ $lang := .Get "lang" }}
{{ $linenos := .Get "linenos" }}
{{ $hl_lines := .Get "hl_lines" }}
{{ $hlClass := "" }}
{{ if $hl_lines }}
    {{ $hlClass = printf "hl_lines=\"%s\"" $hl_lines }}
{{ end }}
{{ if eq $linenos "true" }}
    <pre class="line-numbers"><code class="language-{{ $lang }}" {{ $hlClass | safeHTMLAttr }}>{{ .Inner }}</code></pre>
{{ else }}
    <pre><code class="language-{{ $lang }}" {{ $hlClass | safeHTMLAttr }}>{{ .Inner }}</code></pre>
{{ end }}

而我的主题里面，codeblock.html 如下：

codeblock.html
 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

{{ $filename := .filename | default "" -}}
{{ $base_url := .base_url | default "" -}}
{{ $lang := .lang | default "" }}
{{ $content := .content }}
{{ $options := .options | default (dict) }}

{{- if $filename -}}
  <div class="filename not-prose" dir="auto">
    {{- if $base_url -}}

      {{- $base_url = strings.TrimSuffix "/" $base_url -}}
      {{- $filename = strings.TrimPrefix "/" $filename -}}
      {{- $file_url := urls.JoinPath $base_url $filename -}}

      <a class="hx-no-underline hx-inline-flex hx-items-center hx-gap-1" href="{{ $file_url }}" target="_blank" rel="noopener noreferrer">
          <span>{{- $filename -}}</span>
          {{- partial "utils/icon" (dict "name" "external-link" "attributes" "height=1em") -}}
      </a>
    {{- else -}}
      {{- $filename -}}
    {{- end -}}
  </div>
{{- end -}}

{{- if transform.CanHighlight $lang -}}
  <div>{{- highlight $content $lang $options -}}</div>
{{- else -}}
  <pre><code>{{ $content }}</code></pre>
{{- end -}}

要计算行号很简单：

{{ $lines := len (split $content "\n") }}

要不显示行号也简单，修改 options 这个 map 即可，举个例子：

{{ $options = merge $options (dict "linenos" "false") }}

这会将 options 这个 map 和 linenos=false 这个 map 合并，类似 putAll，我最终的文件如下：

 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

{{ $filename := .filename | default "" -}}
{{ $base_url := .base_url | default "" -}}
{{ $lang := .lang | default "" }}
{{ $content := .content }}
{{ $options := .options | default (dict) }}
{{ $lines := len (split $content "\n") }}
{{ if lt $lines 2 }}
  {{ $options = merge $options (dict "linenos" "false") }}
{{ end }}

{{- if $filename -}}
  <div class="filename not-prose" dir="auto">
    {{- if $base_url -}}

      {{- $base_url = strings.TrimSuffix "/" $base_url -}}
      {{- $filename = strings.TrimPrefix "/" $filename -}}
      {{- $file_url := urls.JoinPath $base_url $filename -}}

      <a class="hx-no-underline hx-inline-flex hx-items-center hx-gap-1" href="{{ $file_url }}" target="_blank" rel="noopener noreferrer">
          <span>{{- $filename -}}</span>
          {{- partial "utils/icon" (dict "name" "external-link" "attributes" "height=1em") -}}
      </a>
    {{- else -}}
      {{- $filename -}}
    {{- end -}}
  </div>
{{- end -}}

{{- if transform.CanHighlight $lang -}}
  <div>{{- highlight $content $lang $options -}}</div>
{{- else -}}
  <pre><code>{{ $content }}</code></pre>
{{- end -}}

我只新增了 6-9 这几行，不得不说，现在的 AI 是真的方便啊。

最后更新于
深入理解 spring boot 自定义属性Windows 11 终于成了最好用的 Linux 发行版