Alee
← Go back

MarkDown语法二

· Alee

MarkDown高级进化

Table of contents

Open Table of contents

    在阅读此篇博文时，你应该已经掌握了MarkDown的基础语法和基本使用，如果还没有掌握，请先阅读我之前写的博文MarkDown语法一，本篇博文将教授大家MarkDown的高级使用，比如用 flowchart.js 描述流程图，图片大小的调整，图片链接等

    声明

    MarkDown的高级使用，有些功能属于拓展语法，可能存在某些平台的编译器无法识别的情况

    MarkDown图片大小

    可使用 Kramdown 属性列表 {:width="100" height="100"} 或 HTML 控制图片大小。属性列表不是通用 Markdown 语法；只设置一个尺寸时，浏览器会按图片比例缩放另一个尺寸。

    ![Alee](/img/cannondale_twitter.png)

<img src="/img/cannondale_twitter.png" width="50" height="100"/>

![Alee](/img/cannondale_twitter.png){:width="100"}

![Alee](/img/cannondale_twitter.png){:height="150"}

    显示效果：

    Alee

    Alee

    Alee

    参考式链接

    如果在一篇博文中有多处需要引用同一个链接，可以使用参考式链接来减少重复内容。

    定义：[id]: 链接地址 “提示文本” 提示文本可以不要

    使用：[文本][id]

    //使用
[Alee的博客][Alee]
//定义
[Alee]: http://www.aleej.com "Alee Blog"

    显示效果：

    Alee的博客

    自动链接

    通过<url>定义

    <http://www.aleej.com>

    显示效果：

    http://www.aleej.com

    图片链接

    图片链接就是把图片和链接嵌套

    格式：[![文本](图片地址)](图片链接地址 “提示文本”) 提示文本可以不要

    [![Alee](/img/cannondale_twitter.png)](http://www.aleej.com "点击访问Alee Blog")

    显示效果：

    Alee

    在新标签页打开链接

    在链接后加上 Kramdown 属性列表 {:target="_blank" rel="noopener"}，或者使用 HTML 属性。属性列表不是通用 Markdown 语法；rel="noopener" 可避免新标签页访问原页面的 window.opener。

    [Alee Blog][Alee]{:target="_blank" rel="noopener"}
[Alee](http://www.aleej.com/about){:target="_blank" rel="noopener"}
<http://www.aleej.com>{:target="_blank" rel="noopener"}
[![Alee](/img/cannondale_twitter.png){:width="50"}](http://www.aleej.com "点击访问Alee Blog"){:target="_blank" rel="noopener"}
<a href="http://www.baidu.com" target="_blank" rel="noopener">新窗口打开百度</a>

    显示效果：

    Alee Blog

    Alee

    http://www.aleej.com

    Alee

    新窗口打开百度

    流程图

    下面的示例使用 flowchart.js 的 DSL。flow 只是代码围栏的语言标记；本项目没有加载 flowchart.js，因此页面只会显示代码块，不会绘制流程图。

    st=>start: 点击登录:>http://www.aleej.com
op1=>operation: 判断用户名和密码是否填写
op2=>operation: 校验用户名和密码是否规范填写
op3=>operation: 请求服务器判断用户名和密码是否正确
sub1=>subroutine: 提示用户名密码未填写
sub2=>subroutine: 提示用户名密码填写不规范
sub3=>subroutine: 提示用户名密码填写不正确
con1=>condition: 是否填写
con2=>condition: 是否规范
con3=>condition: 是否正确
io=>inputoutput: 重新输入
en=>end: 结束 登录成功

st->op1->con1
con1(yes,right)->op2->con2
con1(no)->sub1->io->op1
con2(yes,right)->op3->con3
con2(no)->sub2->io->op1
con3(yes,right)->en
con3(no)->sub3->io->op1

    声明元素

    格式：tag=>type: content[|flowstate][:>url]

    规则：

    1. tag 设置元素名称。
    2. => 是元素定义符。
    3. type 可取 start、end、operation、subroutine、condition、inputoutput、input、output 或 parallel。
    4. content 设置元素显示内容，中英均可；|flowstate 和 :>url 是可选项，分别设置样式状态和链接。

    注意：=> 前后不能加空格，type: 后要有空格，:> 中间不能有空格；链接后加 [blank] 可在新标签页打开。

    定义流程

    格式：tag1(branch[, direction])->tag2

    规则：

    1. -> 是流程定义符，用来连接元素。
    2. branch 为条件节点的 yes 或 no 分支；并行节点使用 path1、path2 或 path3。
    3. direction 可选，设置这条连接从当前节点的哪个方向离开，可用 left、right、top 或 bottom；终点没有出线方向。

    条件节点需要分别定义两个分支，例如：

    st->op1->c2
c2(yes)->io->e
c2(no)->op2->e

    -> 两侧不要加空格。

    LaTeX

    LaTeX 数学块是 Kramdown 扩展语法，不属于通用 Markdown。Kramdown 会输出 MathJax 定界符；本项目没有加载 MathJax，因此页面不会排版公式。需要在页面模板中加载 MathJax 才能显示排版结果。

    格式：在独立的行上使用 $$ 开始和结束：

    $$
y= \begin{cases}
-x,\quad x\leq 0 \\
x,\quad x>0
\end{cases}
$$

    输出效果（本页面未加载 MathJax，浏览器不会排版）：

    \[y= \begin{cases} -x,\quad x\leq 0 \\ x,\quad x>0 \end{cases}\]