如果评论中带列表（list），那么当前的列表会顺序递进样式：比如第一层用实心圆点儿，第二层用空心圆点儿，第三层用方块儿。这个行为是浏览器默认的。

但是我的评论列表也是用的 <ul>/<ol> 来描述，这种嵌套关系会导致评论内容中的列表表现不一样，所以需要重置列表项的样式（list-style-type）。 做法也非常简单：

1
2
3

ul, ol {
    list-style-type: initial;
}

刚解决完这个问题后，我突发奇想：Markdown 是支持多种 Markers 符号官方的（就是用哪个符号表示要开始写列表了，比如：- + * . )）， 那么我为啥不保留原始的这个符号呢，这样更所见即所得？ 于是我就打开了 list-style-type 一看，竟然示例中第一个就是自定义样式🤣，这下不得不学了……

如我想像中的那样简单，常用的都预置了。但是 1) 2) 这种没有。我用 @at-rule 自己写了一个 marker 生成器：

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

// https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style
@counter-style parenthesis {
	system: numeric;
	symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
	suffix: ") ";
}
ul, ol {
	&.marker-minus          { list-style-type: "- ";        }
	&.marker-plus           { list-style-type: "+ ";        }
	&.marker-asterisk       { list-style-type: "* ";        }
	&.marker-period         { list-style-type: decimal;     }
	&.marker-parenthesis    { list-style-type: parenthesis; }
}

然后就是在文档渲染时解析 Markdown 的过程中判断一下 Marker 的类型并增加类名即可：

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

var knownListItemMarkers = map[byte]string{
	'-': `minus`,
	'+': `plus`,
	'*': `asterisk`,
	'.': `period`,
	')': `parenthesis`,
}

// 保留列表样式。
//
// 只是增加类名，前端通过类名自行决定怎么展示。
func (*_ReserveListItemMarkerStyle) WalkEntering(n ast.Node) (ast.WalkStatus, error) {
	switch typed := n.(type) {
	case *ast.List:
		if class, ok := knownListItemMarkers[typed.Marker]; ok {
			appendClass(typed, `marker-`+class)
		}
	}
	return ast.WalkContinue, nil
}

然后就是一些例子🌰：

如愿

  • 演唱：王菲
  • 作词：唐恬
  • 作曲：钱雷
  • 你是 遥遥的路
  • 山野大雾里的灯
  • 我是孩童啊 走在你的眼眸
  • 你是 明月清风
  • 我是你照拂的梦
  • 见与不见都一生与你相拥
  1. 而我将爱你所爱的人间
  2. 愿你所愿的笑颜
  3. 你的手我蹒跚在牵
  4. 请带我去明天
  5. 如果说你曾苦过我的甜
  6. 我愿活成你的愿
  7. 愿不枉啊 愿勇往啊
  8. 这盛世每一天
  1. 你是岁月长河 星火燃起的天空
  2. 我是仰望者 就把你唱成歌
  3. 你是我之所来 也是我心之所归
  4. 世间所有路都将与你相逢
桃子的碎碎念 桃子 编辑