HTML 美化 Markdown 排版

Markdown 是一门轻量标记型语言，因其简单易用而受众甚广。但是正因其简单，故而也有一部分局限性（虽然说它保留的即是最常用、最基本的排版功能）。本文就来说说在使用 Markdown 排版的时候，如何引入一点 HTML 的技巧来帮助我们排版的更加好看。

1. 对齐控制

标准的 Markdown 只支持居左对齐。

1
<center>I am centered</center>

会排版出居中的效果：

I am centered

1
2
<!-- right-aligned -->
<div style="text-align:right">I am right aligned</div>

会排版出居右的效果：

I am right aligned

2. 字体控制

通过 HTML 标签，我们可以精确的控制字体族，字体大小，字体颜色，字体形态（粗体，斜体，下划线，删除线）等等。具体参见w3school.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<font size='3' color="red">I am red of size 3</font>
<font size=5px color="#66CCFF">I am 天依蓝 of size 5px</font>
<font face="verdana" color="green">I am verdana of color green</font>
<u>I am underlined</u>
<s>I am deleted :(</s>
<b>I am bolded</b>
<i>I am italic</i>
<big>I am bigger than you</big>
<small>I am smaller than you</small>
look<sup>at</sup><sub>me</sub>
<kbd>Ctrl+Shift+D</kbd>
<q>using this for short quote</q>
<div style="background-color:black">举世皆白我独黑</div>

的排版效果：

I am red of size 3 I am 天依蓝 of size 5px I am verdana of color green I am underlined ~~I am deleted :(~~ I am bolded I am italic I am bigger than you I am smaller than you look^at_me Ctrl+Shift+D using this for short quote

举世皆白我独黑

3. 使用 FontAwesome 图标

FontAwesome 是一款图标字体集合。以下 Icon 的名称均可以在官网查到：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<i class="fa fa-check-square"> </i> completed
<i class="fa fa-square"> </i> uncompleted
<i class="fa fa-github"> </i> github icon
<i class="fa fa-weixin"> </i> wechat icon
<i class="fa fa-rss"> </i> rss icon
<i class="fa fa-twitter"> </i> twitter icon
<i class="fa fa-weibo"> </i> weibo icon
<i class="fa fa-weibo fa-lg"> </i> large weibo icon
<i class="fa fa-weibo fa-2x"> </i> 2\*weibo icon
<i class="fa fa-weibo fa-4x"> </i> 4\*weibo icon

的排版效果如下： completed uncompleted github icon wechat icon rss icon twitter icon weibo icon large weibo icon 2*weibo icon 4*weibo icon

4. 插图控制

大小控制

1
2
3
<!-- 类似的可以设置 height="100" -->
<img src="miwa.png" width="100" alt="miwa-width=100" />
![miwa](miwa.png)

下面是排版结果的对比：

miwa

图标题

1
2
![hover text](https://hbimg.huaban.com/fe01cdf198b7da8ffec56f52fcf505acffca258a1fb3a-j6MBCO_/fw/480/format/webp "sample caption")
<figcaption>颇有意境的美少女</figcaption>

hover text

颇有意境的美少女

如此能生效的原因是本站加载了名为figcaption的 css，所以这个标签能够被正确排版。使用本主题 ¹ 只需要在主题文件夹下的_custom.scss中增加：

1
2
3
4
5
6
7
8
9
// file: <site-root>/themes/even/assets/sass/_custom/_custom.scss
figcaption {
  // background-color: #222;
  color: gray;
  padding: 3px;
  text-align: center;
  margin-top: -20px;
  margin-bottom: 20px;
}

即可。

5. ShortCode

Hugo 提供了 ShortCode 功能，简单来说就是强大的 html 替换模版，因为直接在 markdown 里面写 html 会显得冗长，所以将一个个排版样式作为 ShortCode 提供给用户使用。详情参考文档，这里列举一些本主题¹提供的 ShortCode.

不建议使用 ShortCode，因为脱离了 hugo，这些元素就无法渲染了。为了保持 markdown 源文件的兼容性，不推荐使用此功能。

 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
<div class='align-center'>
  





<div><iframe id="biliplayer" src="//player.bilibili.com/player.html?bvid=BV1qs411D7Po&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" loading="lazy" > </iframe></div>


<style>

#bilibili {
  width: 100%;
  height: 550px;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  #bilibili {
    width: 100%;
    height: 250px;
  }
}
</style>

sample b23 video desc

</div>

完球，上述代码段已经是展开后的形式了，应该是 hugo 转网页的时候一定会做替换，目前还没找到 escape 的方法，先将就着看吧。

可排版出如下内容

sample bilibli video desc

但其实上述内容在普通

ShortCode 在 vscode 中的排版效果

6. 代码高亮

NOTE: 这个功能依赖 hugo，不建议使用。

Cf. https://gohugo.io/content-management/syntax-highlighting/#highlighting-in-code-fences

```go  {linenos=table,hl_lines=[8,"15-17"],linenostart=199}
// GetTitleFunc returns a func that can be used to transform a string to
// title case.
//
// The supported styles are
//
// - "Go" (strings.Title)
// - "AP" (see https://www.apstylebook.com/)
// - "Chicago" (see https://www.chicagomanualofstyle.org/home.html)
//
// If an unknown or empty style is provided, AP style is what you get.
func GetTitleFunc(style string) func(s string) string {
  switch strings.ToLower(style) {
  case "go":
    return strings.Title
  case "chicago":
    return transform.NewTitleConverter(transform.ChicagoStyle)
  default:
    return transform.NewTitleConverter(transform.APStyle)
  }
}
```

会排版出如下效果

199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
// GetTitleFunc returns a func that can be used to transform a string to
// title case.
//
// The supported styles are
//
// - "Go" (strings.Title)
// - "AP" (see https://www.apstylebook.com/)
// - "Chicago" (see https://www.chicagomanualofstyle.org/home.html)
//
// If an unknown or empty style is provided, AP style is what you get.
func GetTitleFunc(style string) func(s string) string {
  switch strings.ToLower(style) {
  case "go":
    return strings.Title
  case "chicago":
    return transform.NewTitleConverter(transform.ChicagoStyle)
  default:
    return transform.NewTitleConverter(transform.APStyle)
  }
}

Reference

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。  就是没有关闭标签的空元素（  标签定义换行）。在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。在开始标签中添加斜杠，比如  ，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。即使   在所有浏览器中都是有效的，但使用   其实是更长远的保障。
——w3shcool

Hugo theme even ↩︎ ↩︎

Contents