天使漫步IT工作室天使漫步IT工作室

【markdown技巧】 - 怎么让内容换行


Warning: count(): Parameter must be an array or an object that implements Countable in /www/wwwroot/u11u.com/usr/themes/wq/functions.php on line 110

Warning: count(): Parameter must be an array or an object that implements Countable in /www/wwwroot/u11u.com/usr/themes/wq/functions.php on line 116

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

比如:天使漫步工作室 中让工作室换行,则只需要在工作室前面加入<br/>

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

<br/>

后记

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

<br/>
markdown过程

  • 1、编辑器中输入带有markdown文本语法的文章。
  • 2、markdown解析器(如:markdownmarkdown-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 编译原理

本站原创,欢迎转载,转载敬请标明出处:天使漫步IT工作室 » 【markdown技巧】 - 怎么让内容换行
添加新评论


Warning: Use of undefined constant php - assumed 'php' (this will throw an Error in a future version of PHP) in /www/wwwroot/u11u.com/usr/themes/wq/comments.php on line 38