Markdown解析引擎

段落

Bitcron 在解析 Markdown 的时候,并没有采用常见的p+br的模式,而是p+span+br
每个 P 元素,会有一个 class md_block
每个 P 元素内的每一行,会尽量用 SPAN 进行包裹,并有一个 class md_line。如果当前行是以<开头,>结尾的,则认为内部有其它 HTML 元素,同时还会有一个 class md_line_dom_embed
如果没有特别的 css 样式定义,那么这个跟常见的p+br的实际效果一致;但是允许更多自定义的可能,比如需要针对中文的行首缩进,可以让.md_line{display:block; text-indent:2em}这样的规则生效。

代码高亮

除了一部分比如 table、mathjax、flow 等会被直接处理转义的之外,其它的代码块最终会以代码高亮的形式输出。
默认的 class 为codehilite highlight, 如果是显示行数的,同时还有一个 class 是with_lines
如果系统中无法对应一个语言的高亮,那么会输出原始的pre结果,但是这个pre元素,会有个 class为lang_<所声明的语言>

如果你需要对 Markdown 进行自己的特殊扩展,通过特定的代码块进行提取,会是一个比较自然的方式。

高亮的 css 样式

Bitcron 采用 Pygemtns 作为代码高亮的基础引擎,高亮的具体视觉表现由 css 样式决定。
一般情况下,可以在模板内直接调用+h.load("markdown"),载入Bitcron默认的Markdown样式文件,内含代码高亮相关的样式规则,但必须保证 .markdown .codelihite这样的css filter的结构存在,不然是无效的;比如说呈现文章详细的时候如下代码:

+h.load('markdown')
h1= post.title
.markdown.post_content= post.content

如果有进一步的订制,可以先获取markdown/basic.scc,查看里面对应的高亮样式,css样式对应的filter为.markdown .codehilite
也可以参考这些常用的Pygments样式,查看页面源码,获得对应的规则(但不能直接使用,比如monokai, 需要将.monokai 替换为 .codehilite)。

特殊标记的 class

md_align_center

Dom 类型: span
作用: [居中语法]产生的标识
特别说明: 如果是## [title] 这种H1-H6级别的标题,则拥有md_align_center这个 class 之外,也同时会被标记为md_header

md_align_right

作用类似于md_align_center

todo_item

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

md_has_block_below

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

toc

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

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