Hugo Theme - Markdown Render Hooks
2023年11月16日 2024年2月13日
说明
Hugo最终将markdown格式的博文转换成html格式
将markdown文件中的标题, 图片, 链接, 代码框转换成html格式时, 我们可以为其指定样式, 存放在 themes/tess/layouts/_default/_markup 目录下
Hugo转换时, 去该路径下查找, 一旦发现对应名称文件, 使用指定html样式生成元素. 也就是说, 存在对应名称文件, 文件内容如果为空, 将移去所有匹配元素
因为不需要我们指定路径, 文件路径不要写错
Markdown render hooks
Hugo目前对标题, 图片, 链接, 代码框提供支持
| 文件名 | |
|---|---|
| 标题 | render-heading.html |
| 图片 | render-image.html |
| 链接 | render-link.html |
| 代码框 | render-codeblock.html |
本文主要设置代码框样式
标题模板
1<!-- 2 匹配 3 ### Section A 4 --> 5<h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }} <a href="#{{ .Anchor | safeURL }}" class="anchor" aria-hidden="true">#</a></h{{ .Level }}>
图片模板
添加了图片样式
Bootstrap 5-Images
1<!-- 2 只能匹配 3  4 --> 5<p class="md__image"> 6 <img src="{{ .Destination | safeURL }}" class="img-thumbnail rounded" alt="{{ .Text }}" {{ with .Title }} title="{{ . }}"{{ end }} /> 7</p>
链接模板
1<!-- 2 只能匹配 3 [Text](https://www.gohugo.io "Title") 4 --> 5<a href="{{ .Destination | safeURL }}"{{ with .Title }} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank" rel="noopener"{{ end }}>{{ .Text | safeHTML }}</a>
代码框模板
-
高亮方案选择
dracula
Chroma Style Gallery -
使用merge合并配置选项
collections.Merge -
选项说明
transform.Highlight-Options-
行号: 文本和无法识别的语言不显示行号
关键字linenos为
inline时, 同时设置了两个选项,linenos为true,lineNumbersInTable为false -
高亮样式
关键字style
-
-
获取转换后的代码框
transform.HighlightCodeBlock-
.Wrapped返回使用<div>, <pre>和<code>封装后的元素
-
.Inner则在自定义封装时使用
-
render-codeblock.html
1{{ $lineNumbers := false }} 2{{ $ignoredLanguages := slice "md" "markdown" "text" "txt" }} 3 4{{ if and (transform.CanHighlight .Type ) (not (in $ignoredLanguages .Type)) }} 5 {{ $lineNumbers = "inline" }} 6{{ end }} 7 8{{ $style := "dracula" }} 9 10{{ $opts := merge .Options (dict "linenos" $lineNumbers) }} 11{{ $opts = merge $opts (dict "style" $style) }} 12 13{{ $result := transform.HighlightCodeBlock . $opts }} 14{{ $result.Wrapped }}
添加样式
-
创建
assets/scss/_pre.scss文件
代码样式1pre { 2 font-family: Consolas; 3 text-align: left; 4 padding: 1em; 5 6 margin: 0; 7 border-radius: 5px; 8 white-space: pre; 9 word-spacing: normal; 10 word-break: normal; 11 word-wrap: normal; 12 line-height: 1.5; 13 14 tab-width: 4; 15} 16 17pre span { 18 line-height: 1.5rem; 19 white-space: pre; 20}
-
在
assets/scss/app.scss中导入1@import "pre";
显示代码语言
-
添加样式
assets/scss/_pre.scss1pre[data-lang]::before { 2 content: attr(data-lang); 3 display: inline; 4 margin: auto; 5 color: gray; 6 border-bottom: 1px solid gray; 7}
-
修改代码框模板
- 高亮样式改为vulcan, 该方案无背景色
- 文本框不显示语言
compare函数 - 转换语言文本, 可省略
render-codeblock.html1{{ $lineNumbers := false }} 2{{ $ignoredLanguages := slice "md" "markdown" "text" "txt" }} 3 4{{ if and (transform.CanHighlight .Type ) (not (in $ignoredLanguages .Type)) }} 5 {{ $lineNumbers = "inline" }} 6{{ end }} 7 8{{ $style := "vulcan" }} 9 10{{ $opts := merge .Options (dict "linenos" $lineNumbers) }} 11{{ $opts = merge $opts (dict "style" $style) }} 12 13{{ if ne .Type "text"}} 14 {{ $text := .Type }} 15 {{ if eq .Type "bash" }} 16 {{ $text = "BASH" }} 17 {{ else if eq .Type "csharp" }} 18 {{ $text = "C#" }} 19 {{ else if eq .Type "cpp" }} 20 {{ $text = "C++" }} 21 {{ else if eq .Type "html" }} 22 {{ $text = "HTML" }} 23 {{ end }} 24<pre data-lang={{ $text }} class="bg-dark my-4">{{ $result := transform.HighlightCodeBlock . $opts }} {{ $result.Inner }}</pre> 25{{ else }} 26<pre class="bg-dark my-4">{{ $result := transform.HighlightCodeBlock . $opts }} {{ $result.Inner }}</pre> 27{{ end }}
- 高亮样式改为vulcan, 该方案无背景色
图片样式
图片格式说明
-
使用ox-hugo导出的图片链接格式
{{< figure src=“pic.png” width=“700” >}} <br/>
-
markdown图片链接
 -
最终都转换成html图片链接
1<img src="image.jpg" width="120" />
直接在markdown文件中使用html图片链接
- 转换成html文件时会被忽略
- 开启选项后可以使用
config.toml
1[markup.goldmark.renderer] 2unsafe=true
为图片添加样式
当前图片会超出区域显示
-
创建
assets/scss/_image.scss文件1img { 2 border-radius: 3px; 3 max-width: 100%; 4 height: auto; 5}
-
在
assets/scss/app.scss中导入1@import "image";
书签
| - |
|---|
| 关于对表格使用render hooks |
| 文本超出区域 > white-space |
| html自动换行 |
