Markdown的分级标题十分简洁,但当多级标题同时使用时,有时其渲染的样式显得容易混淆。

通过自定义hugo主题中的css文件,可以实现对heading渲染的自定义,实现以下效果:

实现方法为修改thems/xxx/static/下的主题css文件即可,在css文件中修改或增加下列内容:

.post-content h1:before {
	content: "ⅰ";
	background-color: #CE4D45; /* bg-blue-100 */
	color: #FFFFFF; /* text-blue-800 */
	font-size: 0.6em; /* text-2xl */
	font-weight: 600; /* font-semibold */
	margin-left: 0em; /* ml-2 */
	padding: 0.2em 0.5em; /* px-2.5 py-0.5 */
	border-radius: 0.3rem; /* rounded */
	display: inline-block; /* to apply padding and border-radius */
	vertical-align: top;
}

以上为h1标题的样式修改案例,实现在标题左侧增加一个罗马小写数字“i”并增加颜色样式。 其他标题修改类似。