MarkDown语法二

MarkDown高级进化

Posted by Alee on June 7, 2018

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

声明

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

MarkDown图片大小

使用{:width=”100” height=”100”} 或者使用HTML格式控制图片显示大小,有宽度(width)和高度(height)两个属性,如果只指定一个,则另一个会等比例缩放。

height属性在某些编译器上不生效

![Alee](http://www.aleej.com/img/cannondale_twitter.png)

<img src="http://www.aleej.com/img/cannondale_twitter.png" width="50" height="100"/>

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

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

显示效果:

Alee

Alee

Alee

参考试链接

如果在一篇博文中有多出需要引用一个链接,可以使用参考试链接来减少字符数量提高效率。

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

使用:[文本][id]

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

显示效果:

Alee的博客

自动链接

通过<url>定义

<http://www.aleej.com>

显示效果:

http://www.aleej.com

图片链接

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

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

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

显示效果:

Alee

在新标签页打开链接

在所有链接后面加上{:target=”_blank”} 或者使用HTML语法

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

显示效果:

Alee Blog

Alee

http://www.aleej.com

Alee

新窗口打开百度

流程图

通过代码段的方式引入流程图 语言为flow

​```flow
//your code
​```

示例:

​```flow
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
​```

显示效果:(部分编译器可能不识别)

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 :>url

规则:

  1. tag 设置元素名称
  2. => 元素定义符
  3. type: 设置元素类型,共6种类型
    1. start: 开始,圆角矩形
    2. end: 结束,圆角矩形
    3. operation: 操作/行动方案,普通矩形
    4. subroutine: 子主题/模块,双边线矩形
    5. condition: 条件判断/问题审核,菱形
    6. inputoutput: 输入输出,平行四边形
  4. content 设置元素显示内容,中英均可
  5. :>url 设置元素链接,可选,后接[blank]可以新建窗口打开

须知:注意空格,=>前后都不能接空格,type:后必须接空格,:>是语法标记,中间不能有空格

定义流程

格式:tag1(branch,direction)->tag2

规则:

  1. -> 流程定义符,连接两个元素
  2. branch 设置 condition 类型元素的两个分支,有 yes/no 两个值,其他元素无效
  3. direction 定义流程走线方向,有 left/right/top/bottom 四个值,所有元素有效,此项配置可选

须知:

  • 注意空格,->前后都不能有空格
  • 由于condition类型有两个分支,我们一般遇到condifiton元素时就换行,例如
st->op1->c2
c2(yes)->io->e
c2(no)->op2->e

LaTex

格式:$$回车LaTex代码回车$$

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

显示效果: \(y= \begin{cases} -x,\quad x\leq 0 \\ x,\quad x>0 \end{cases}\)