【markdown技巧】 – typecho怎么让内容换行及markdown工作原理

其实换行很简单,只需要在内容里面使用`
`标签即可。

比如:[天使漫步工作室][1] 中让工作室换行,则只需要在工作室前面加入

当然还可以使用p标签,不过没有试验过。

###后记

markdown期出来以后被很多人喜欢,其简单的语法规则和丰富的效果满足了大多数文章的展示需求。
大多数的教程只是说了各种标签的使用规则而没有说很多技巧,要说技巧还是要谈及markdown如何工作。从解析层面分析为何上面的`
`会工作。

**markdown过程**

– 1、编辑器中输入带有markdown文本语法的文章。
– 2、markdown解析器(如:[markdown][2]、[markdown-js][3])进行解析,解释后生成经过编码的html文章。
– 1、根据解析引擎的能力,一般解释:解析: Inline HTML, Automatic paragraphs, headers, blockquotes, lists, code blocks, horizontal rules, links, emphasis, inline code and images
– 2、用正则表达式,将相关的标签进行替换:
– 3、最后对个别标签进行类加入,高亮等处理,最后统一输出。

相关的正则表达式如下:

“`
regexobject: {
headline: /^(#{1,6})([^#
]+)$/m,
code: /s“`
?([^`]+)“`/g,
hr: /^(?:([*-_] ?)+)11$/gm,
lists: /^((s*((*|-)|d(.|))) [^
]+)
)+/gm,
bolditalic: /(?:([*_~]{1,3}))([^*_~
]+[^*_~s])1/g,
links: /!?[([^]<>]+)](([^ )<>]+)( “[^()”]+”)?)/g,
reflinks: /[([^]]+)][([^]]+)]/g,
smlinks: /@([a-z0-9]{3,})@(t|gh|fb|gp|adn)/gi,
mail: /<(([a-z0-9_-.])+@([a-z0-9_-.])+.([a-z]{2,7}))>/gmi,
tables: /
(([^|
]+ *| *)+([^|
]+
))((:?-+:?|)+(:?-+:?)*
)((([^|
]+ *| *)+([^|
]+)
)+)/g,
include: /[[<]include (S+) from (https?://[a-z0-9.-]+.[a-z]{2,9}[a-z0-9.-?&/]+)[]>]/gi,
url: /<([a-zA-Z0-9@:%_+.~#?&/=]{2,256}.[a-z]{2,4}(/[-a-zA-Z0-9@:%_+.~#?&//=]*)?)>/g
}
“`

– 3、浏览器进行html渲染。

**案例讲解**

以正则表达式处理小标题为例:

headline: /^(#{1,6})([^#
]+)$/m

上面表达式的意思是:匹配1到6个`#`符号、匹配以#然后
结尾的。

处理样例:

# abc
## sub_abc

处理样例的过程代码:

“`js
var headling = /^(#{1,6})([^#
]+)$/m
while ((stra = headline.exec(str)) !== null) {
count = stra[1].length;
str = str.replace(stra[0], ‘‘ + stra[2].trim() + ‘‘).trim();
}
“`

可以看到,当`headline.exec`对字符串进行处理后,如果不为空则进入到循环体进行处理。

– str 为字符串本身。
– stra[0] 匹配出来的标题列,如:`# abc`
– stra[2] 为 `#` 后面的内容。
– count 即为 `#`的个数,当和h拼起来后就成了h标签的级别,以上示例的结果为h1、最后文档的效果为一级标题。

当然,这里并不涉及到完全性的处理. 最简单的方式就是过滤字符串,不过过滤字符串也有很多方法. 最直接的就是replace直接替换.这里不作讨论。

到此,我们能得出结论:在markdown编辑器里面写作的时候,用原始的html标签写作是不会被markdown过滤,相反有时候可以能给我们带来想要的结果,如利用`
`标签来换行就是其中的一种运用。

end

本文转载:[天使漫步-【markdown技巧】 – 怎么让内容换行][4]

[1]: http://tianshimanbu.com
[2]: https://github.com/chjj/marked
[3]: https://github.com/evilstreak/markdown-js
[4]: http://tianshimanbu.com/index.php/web-admin/markdown-br.html

上一篇 2017-08-31 上午2:13
下一篇 2017-09-30 上午10:44