在 FirstWeb.app 中有对应的一个 Markdown 样式 Demo 的网站目录,可以参考其源码。
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
可否实现?
按照自己的需求,可以有如下三种使用方式 (任选其一):
markdown.css
& page.css
,替换掉少量的基本样式,比如背景、文字颜色、H1-H6 的颜色、blockquote 的左边框色、链接颜色,以形成一个新的风格;
markdown.css
, 进一步对不同 Markdown 解析后的 DOM 元素进行样式的再定义。
markdown.css
& page.css
中,现实世界中,并非所有 CSS 规则都规规矩矩呆一个地方的,不过分的割裂,都是正常的。
实心圆、空心圆
的样式可否调整,能否使用 :before
来实现?又或者仅仅让这 圆点
跟文字的颜色不一样,如何处理呢? (<li><span>文字</span></li>
这种形式,可以试试让 li
是圆点的颜色,然后 span
是文字的颜色,就实现这个效果了)
如果此时内心犹疑,担心完全自定义全新的样式,根本做不到。
这没有关系,有担心,很正常;真的做不到,也很正常。
但是,我们可以“抄”呀。如果看到他人网页中自己满意的视觉风格 (Markdown 的样式应该还是蛮多的),就可以“抄”了,但不要直接去抄代码,用自己的代码实现,如果不理解的,就 Debug 源头的页面,看它样式为什么这么写。
有思考的去“抄”,是临摹,是高效率的学习方法之一;如果不思考的话,倒就真的成了抄袭,在自学的过程中,抄袭是自我毁灭的不二之选。而临摹和抄袭的边界,自己把握,这个度,过高和过低,都不是太好的事情。
小贴士: 如何获得 Markdown 解析后的 HTML 源码呢? 可以使用 MarkEditor 或者 Markdown.app 将其导出为 HTML 文件,然后用任意的编辑器打开它,或者使用浏览器打开右键查看源码。