XRING , Software Engineer

Markdown CSS 引擎

2018.07.06

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

段落块

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
Comments
Write a Comment