Markdown 最终会解析为 HTML，本身会采用 p、blockquote、ul、li 等 DOM 类型来表达文本的结构。在实际使用情况中，仅仅这些结构不足以满足排版的需要，因此，MarkEditor 在解析 Markdown 的时候，会进行一定结构性推断，赋予当前 DOM 元素一定的 class name，来标识潜在的文本语义结构。
那么，完成最终页面排版的 CSS 样式，就可以根据这些 css name，来实现更复杂一些的排版。

基本段落、行

• md_block 表示段落，一般(源文本中)两个空行会产生段落的分割
• md_line 表示行
• md_line_dom_embed 当前行是以<开头，>结尾的，则认为内部有其它 HTML 元素
• md_line_with_image 当前行包含图片，且位于行首
• md_line_start 位于段落的首行
• md_line_end 位于段落的尾行
• only_img_before 上一行包含图片，且仅为图片
• blockquote_lines_n 在 blockquot 这个 DOM 类型中，其中 n 为整数，表示当前的 blockquote 内有几行
• h16, H1-H6 都会有这个额外的 css name

一个示例

正文内容，注意下面有空行

![](图片)
这一行是图片标题

注意上面有空行，继续正文内容

在上面的示例文自中，如果最后解析为 HTML 内容，则下面的联合 CSS 的 Class 可以识别到图片、以及图片下面一行的文字:
.md_line_dom_embed.md_line_with_image 表示图片这行；
.only_img_before.md_line_end 表示图片下面一行的文本。

---

段落块

md_has_block_below

Dom 类型: P
作用: 表示紧跟其后的将是ul、ol、blockquote、img的元素。
特别说明: 如果后面是ul，则跟md_has_block_below同时出现的有md_has_block_below_ul; ol、blockquote、img也由此可推。

md_block_as_opening

如果当前段，仅有一行，且行尾出现的是：(中文冒号) 或者 :(英文冒号)，并且紧跟其后的将是ul、ol、blockquote、img的元素，那么这段落生成的 HTML 结构中，会有一个 class name 为 md_block_as_opening。

---

代码相关

• highlight, 表示当前代码类型会进行高亮的对应
• code_lang_xxx, 其中 xxx 类似 python 等具体的语言，表示当前代码高亮的语言类型
• with_lines, 表示显示行数
• lang_xxx, 其中 xxx 为具体的语言类型，DOM 类型为 pre，表示未能对应高亮的代码块

---

列表项

todo_item

Dom 类型: LI
作用: [x] done & [ ] undone 这个Markdown 语法产生的。
特别说明: 如果是 unone 的状态，还会同时拥有一个 class todo_undone_item； 反之已完成的则是 todo_done_item。

---

图片相关

md_scaled_image

Dom类型: IMG
作用: 如果图片实在 MarkEditor 中缩放过的，则会有这个 class。

img_before

Dom类型: P
作用: 当前 P 元素的前一个Dom元素是图片

x2_image

Dom 类型: IMG
作用: 如果一个图片的 src，末尾是@2x的，则会有这个 class 对应。

x3_image

类似x2_image

x4_image

类似x2_image

---

其它

toc

Dom 类型: DIV
作用: [TOC]语法产生的 HTML 片段，由<div class="toc"">进行包裹。

---

仅限 ME

此处的规则仅限于 MarkEditor 中的预览、富文本导出逻辑，在其它场景下，会无效。

• md_block_section: 每个 HTML 片段构建的时候，会外部包括一个 section，其 class name
• md_block_section_for_xx: 如果当前 HTML 片段为 ul，则其也会有一个 class name 为 md_block_section_for_ul