【markdown技巧】 - 怎么让内容换行
其实换行很简单,只需要在内容里面使用<br/>
标签即可。
比如:天使漫步工作室 中让工作室换行,则只需要在工作室前面加入<br/>
当然还可以使用p标签,不过没有试验过。
<br/>
后记
markdown期出来以后被很多人喜欢,其简单的语法规则和丰富的效果满足了大多数文章的展示需求。
大多数的教程只是说了各种标签的使用规则而没有说很多技巧,要说技巧还是要谈及markdown如何工作。从解析层面分析为何上面的<br/>
会工作。
<br/>
markdown过程
- 1、编辑器中输入带有markdown文本语法的文章。
2、markdown解析器(如:markdown、markdown-js)进行解析,解释后生成经过编码的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})([^\#\n]+)$/m,
code: /\s\`\`\`\n?([^`]+)\`\`\`/g,
hr: /^(?:([\*\-_] ?)+)\1\1$/gm,
lists: /^((\s*((\*|\-)|\d(\.|\))) [^\n]+)\n)+/gm,
bolditalic: /(?:([\*_~]{1,3}))([^\*_~\n]+[^\*_~\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: /\n(([^|\n]+ *\| *)+([^|\n]+\n))((:?\-+:?\|)+(:?\-+:?)*\n)((([^|\n]+ *\| *)+([^|\n]+)\n)+)/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}\b(\/[\-a-zA-Z0-9@:%_\+.~#?&\/\/=]*)?)>/g
}
- 3、浏览器进行html渲染。
<br/>
案例讲解
以正则表达式处理小标题为例:
headline: /^(\#{1,6})([^\#\n]+)$/m
上面表达式的意思是:匹配1到6个#
符号、匹配以#然后n结尾的。
处理样例:
# abc
## sub_abc
处理样例的过程代码:
var headling = /^(\#{1,6})([^\#\n]+)$/m
while ((stra = headline.exec(str)) !== null) {
count = stra[1].length;
str = str.replace(stra[0], '<h' + count + '>' + stra[2].trim() + '</h' + count + ' >').trim();
}
可以看到,当headline.exec
对字符串进行处理后,如果不为空则进入到循环体进行处理。
- str 为字符串本身。
- stra[0] 匹配出来的标题列,如:
# abc
- stra[2] 为
#
后面的内容。 - count 即为
#
的个数,当和h拼起来后就成了h标签的级别,以上示例的结果为h1、最后文档的效果为一级标题。
当然,这里并不涉及到完全性的处理. 最简单的方式就是过滤字符串,不过过滤字符串也有很多方法. 最直接的就是replace直接替换.这里不作讨论。
到此,我们能得出结论:在markdown编辑器里面写作的时候,用原始的html标签写作是不会被markdown过滤,相反有时候可以能给我们带来想要的结果,如利用<br/>
标签来换行就是其中的一种运用。
end
本文参考:markdown 编译原理
当前页面是本站的「Google AMP」版。查看和发表评论请点击:完整版 »