定制 Markdown 样式

在 FirstWeb.app 中有对应的一个 Markdown 样式 Demo 的网站目录,可以参考其源码。

Markdown 是什么?

Markdown 是一种简单的写作语法,可以在保证极佳的写作体验的同时,获得高效率;如果没有使用过 Markdown 的,自行了解,非常推荐使用。
本课程是在 MarkEditor 上写作并导出的,同样使用 Markdown 语法,MarkEditor 是付费软件,与 MarkEditor 源自同一引擎的 MarkDown.app 则是免费的。
目前同样免费的还有 Typora,它是所见所得的模式,相对于新手而言更友好;而我的个人偏好,并不推荐『所见所得』模式。

Markdown 专注于文本,放弃对格式的控制。而文本最终呈现,仍然是需要格式的,所以 Markdown 对一些必要的格式(比如几级标题、加粗、引用、列表)进行标注,比如 # 一级标题## 二级标题
那么,Markdown 最终又如何呈现出对应格式呢? Markdown 的文本会转为 HTML 格式,比如 # 一级标题 会变成 <h1>一级标题</h1>,然后,通过 CSS 样式来控制视觉。这种机制完美地分离了两者,内容的归内容,视觉的归视觉。

本文内容

我们针对 Markdown ,完成一个渲染其样式的简单页面。
源码内容主要是 FirstWeb 中的 Demo,你可以直接在上面的代码中修改,主要是 markdown.css
Markdown 解析成 HTML 后,里面涉及了常用的一些 DOM 元素,可以在修改 markdown.css 过程中,对这些 DOM 元素做更进一步的了解。
另外的 page.css 主要是页面的样式,本身也比较简单,具体的自己看详细的代码就可以了;markdown_extra.css 是一些额外形式的样式,比如代码高亮,可以直接略过。

一般来说,Markdown 解析为 HTML 的时候,段落是使用 P + BR(换行)来实现,这样对于排版并不友好,我们的 Markdown 解析引擎是将其转为 P+SPAN+BR 来实现,可兼容常见的形态,又对中文排版更友好。
问题来了,为什么 P+SPAN+BR 的结构能兼容 P + BR,但又能做到 P + BR 做不到的呢?此处并不陈述答案,自己想想,应该容易理解或者找到一个答案。
或者再给一个提示: 行首缩进。在 page.css 中可以找到代码上的对应(默认处于注释的状态),此时P + BR可否实现?

如何使用

按照自己的需求,可以有如下三种使用方式 (任选其一):

  1. 读过文本内容,浏览过 FirstWeb 中的代码即可;
  2. 尝试修改 markdown.css & page.css,替换掉少量的基本样式,比如背景、文字颜色、H1-H6 的颜色、blockquote 的左边框色、链接颜色,以形成一个新的风格;
  3. 进一步修改 markdown.css, 进一步对不同 Markdown 解析后的 DOM 元素进行样式的再定义。

需要注意的点:

  1. 重点是彻底掌握 HTML+CSS 是如何 Debug 以及调整的。
  2. 理解 CSS 的调整,其实就是很多细节上的缝缝补补,比如同一个元素的样式属性同时在 markdown.css & page.css 中,现实世界中,并非所有 CSS 规则都规规矩矩呆一个地方的,不过分的割裂,都是正常的。
  3. 如有机会,尽可能地尝试,比如列表项中,前面的实心圆、空心圆的样式可否调整,能否使用 :before 来实现?又或者仅仅让这 圆点 跟文字的颜色不一样,如何处理呢? (<li><span>文字</span></li>这种形式,可以试试让 li 是圆点的颜色,然后 span 是文字的颜色,就实现这个效果了)

如果此时内心犹疑,担心完全自定义全新的样式,根本做不到。
这没有关系,有担心,很正常;真的做不到,也很正常。
但是,我们可以“抄”呀。如果看到他人网页中自己满意的视觉风格 (Markdown 的样式应该还是蛮多的),就可以“抄”了,但不要直接去抄代码,用自己的代码实现,如果不理解的,就 Debug 源头的页面,看它样式为什么这么写。
有思考的去“抄”,是临摹,是高效率的学习方法之一;如果不思考的话,倒就真的成了抄袭,在自学的过程中,抄袭是自我毁灭的不二之选。而临摹和抄袭的边界,自己把握,这个度,过高和过低,都不是太好的事情。

小贴士: 如何获得 Markdown 解析后的 HTML 源码呢? 可以使用 MarkEditor 或者 Markdown.app 将其导出为 HTML 文件,然后用任意的编辑器打开它,或者使用浏览器打开右键查看源码。