vscode使用Markdown文檔編寫

時間  2020-08-08
標籤 vscode 使用 markdown 文檔 編寫 欄目 Markdown 简体版
原文   原文鏈接

首先安裝vscode工具，具體的使用能夠參考以前的博文：《Visual Studio Code教程：基礎使用和自定義設置》javascript

VScode已經默認集成markdown文檔編輯插件。
能夠新建一個.md文件
Visual Studio Code 原生就支持高亮Markdown的語法，想要一邊編輯一遍預覽，有兩種方法：
1.Ctrl + Shift + P 調出主命令框，輸入 Markdown，應該會匹配到幾項 Markdown相關命令php

2.先按Ctrl + K，而後放掉，緊接着再按 v，也能調出實時預覽框。【要在英文輸入狀態下】css

附錄：markdown語法：html

1.標題

代碼java

注：# 後面保持空格git

# h1
## h2
### h3
#### h4
##### h5
###### h6
####### h7 // 錯誤代碼
######## h8 // 錯誤代碼
######### h9 // 錯誤代碼
########## h10 // 錯誤代碼

演示github

h1

h2

h3

h4

h5
h6

####### h7
######## h8
######### h9
########## h10web

2.分級標題

代碼
注：= - 最少能夠只寫一個，兼容性通常shell

一級標題 ======================
二級標題 ---------------------

演示json

 

3.TOC

注：根據標題生成目錄，兼容性通常

代碼

[TOC]

演示

 

4.引用

代碼1(單行式)

> hello world!

演示

hello world!

代碼2(多行式)

> hello world!
hello world!
hello world!

或者

> hello world!
> hello world!
> hello world!

演示

相同的結果

hello world!
hello world!
hello world!

代碼3(多層嵌套)

> aaaaaaaaa
>> bbbbbbbbb
>>> cccccccccc

演示

aaaaaaaaa

bbbbbbbbb

cccccccccc

5.行內標記

注：用 ` 標記代碼塊將變成一行

代碼

標記以外`hello world`標記以外

演示

標記以外hello world標記以外

錯誤代碼
注：不一樣平臺錯誤略有差別

標記以外 ` 
< div>   
    < div></div>
    < div></div>
    < div></div>
< /div>
`標記以外

演示

 

6.代碼塊

注：與上行距離一空行

代碼1(```)

注：用```生成塊

```
<div>   
    <div></div>
    <div></div>
    <div></div>
</div>
```

演示

<div>   
    <div></div>
    <div></div>
    <div></div>
</div>

代碼2(Tab)

注： Tab縮進

我是文字……

<span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">div</span></span></span><span class="hljs-tag">&gt;</span></span>   
    <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">div</span></span></span><span class="hljs-tag">&gt;</span></span><span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">div</span></span></span><span class="hljs-tag">&gt;</span></span>
    <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">div</span></span></span><span class="hljs-tag">&gt;</span></span><span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">div</span></span></span><span class="hljs-tag">&gt;</span></span>
    <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">div</span></span></span><span class="hljs-tag">&gt;</span></span><span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">div</span></span></span><span class="hljs-tag">&gt;</span></span>
<span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">div</span></span></span><span class="hljs-tag">&gt;</span></span>

<span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">div</span></span></span><span class="hljs-tag">&gt;</span></span>   
    <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">div</span></span></span><span class="hljs-tag">&gt;</span></span><span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">div</span></span></span><span class="hljs-tag">&gt;</span></span>
    <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">div</span></span></span><span class="hljs-tag">&gt;</span></span><span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">div</span></span></span><span class="hljs-tag">&gt;</span></span>
    <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">div</span></span></span><span class="hljs-tag">&gt;</span></span><span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">div</span></span></span><span class="hljs-tag">&gt;</span></span>
<span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">div</span></span></span><span class="hljs-tag">&gt;</span></span>

演示

<div>   
    <div></div>
    <div></div>
    <div></div>
</div>

代碼3(自定義語法)
注：根據不一樣的語言配置不一樣的代碼着色

```javascript var num = 0; for (var i = 0; i < 5; i++) { num+=i; } console.log(num); ```

演示

var num = 0;
for (var i = 0; i < 5; i++) {
    num+=i;
}
console.log(num);

7.插入連接

代碼1(內鏈式)
注：{:target="_blank"}跳轉方式兼容性通常 ，多數第三方平臺不支持跳轉

[百度1](http://www.baidu.com/" 百度一下"){:target="_blank"}

演示

百度1

代碼2(引用式)

[百度2][2]{:target="_blank"}
[2]: http://www.baidu.com/   "百度二下"

演示

百度2

8.插入圖片

代碼1(內鏈式)

![](./01.png '描述')

演示

 

代碼2(引用式)

![name][01]
[01]: ./01.png '描述'

演示

 

9.插入圖片帶有連接

代碼

[![](./01.png '百度')](http://www.baidu.com){:target="_blank"} // 內鏈式[![](./01.png '百度')][5]{:target="_blank"} // 引用式
 [5]: http://www.baidu.com

演示

 

[

 
][5]
[5]: http://www.baidu.com

 

10.視頻插入

注：Markdown 語法是不支持直接插入視頻的
廣泛的作法是 插入HTML的 iframe 框架，經過網站自帶的分享功能獲取，若是沒有能夠嘗試第二種方法
第二是僞造播放界面，實質是插入視頻圖片，而後經過點擊跳轉到相關頁面

代碼1
注：多數第三方平臺不支持插入<iframe>視頻

youku 
<iframe height=498 width=510 src='http://player.youku.com/embed/XMjgzNzM0NTYxNg==' frameborder=0 'allowfullscreen'></iframe>

演示

 

代碼2

[![](./youku2.png)](http://v.youku.com/v_show/id_XMjgzNzM0NTYxNg==.html?spm=a2htv.20009910.contentHolderUnit2.A&from=y1.3-tv-grid-1007-9910.86804.1-2#paction){:target="_blank"}

演示

 

11.序表

代碼1(有序)

注：序列.後 保持空格

1. one
2. two
3. three

演示

  1. one
  2. two
  3. three

代碼2(無序)

* one
* two
* three

演示

  • one
  • two
  • three

代碼3(序表嵌套)

1. one
 1. one-1
 2. two-2
2. two 
 * two-1
 * two-2

演示

  1. one
    1. one-1
    2. two-2
  2. two
    • two-1
    • two-2

代碼4(序表嵌套代碼塊)
注：換行+兩個Tab

* one

<span class="hljs-keyword"><span class="hljs-keyword">var</span></span> a = <span class="hljs-number"><span class="hljs-number">10</span></span>;     <span class="hljs-comment"><span class="hljs-comment">// 與上行保持空行並 遞進縮進</span></span>

<span class="hljs-keyword"><span class="hljs-keyword">var</span></span> a = <span class="hljs-number"><span class="hljs-number">10</span></span>;     <span class="hljs-comment"><span class="hljs-comment">// 與上行保持空行並 遞進縮進</span></span>

演示：

  • one

    var a = 10;

12.任務列表

注：兼容性通常 要隔開一行

代碼

這是文字……- [x] 選項一
 - [ ] 選項二
 - [ ] [選項3]

演示

 

13.表情

注：兼容通常

 

表情代碼地址

14.表格

注： : 表明對齊方式 ,** : 與 | 之間不要有空格**，不然對齊會有些不兼容

代碼1

| a |       b       | c |
|:-------:|:------------- | ----------:|
| 居中 |     左對齊    | 右對齊 |
|=========|===============|============|

演示

a b c
居中 左對齊 右對齊
========= =============== ============

代碼2(簡約寫法)

a  | b | c  
:-:|:- |-: 居中 |     左對齊      | 右對齊 ============|=================|=============

演示

a b c
居中 左對齊 右對齊
============ ================= =============

代碼3(特殊表格)

注：通常對合並單元格，以及其餘特殊格式表格，markdown 是無能爲力的
因此常規的作法是使用HTML標籤，可是這樣的編寫效率極低。
可是有了這款工具的話，全部問題都迎刃而解。

在線生成HTML代碼 Tables Generator (國外的站)

Tables Generator

演示

 

15.支持內嵌CSS樣式

代碼

<p style="color: #AD5D0F;font-size: 30px; font-family: '宋體';">內聯樣式</p>

演示

 

16.語義標記

描述 效果 代碼
斜體 斜體 *斜體*
斜體 斜體 _斜體_
加粗 加粗 **加粗**
加粗+斜體 加粗+斜體 ***加粗+斜體***
加粗+斜體 加粗+斜體 **_加粗+斜體_**
刪除線 刪除線 ~~刪除線~~

17.語義標籤

描述 效果 代碼
斜體 <i>斜體</i> <i>斜體</i>
加粗 <b>加粗</b> <b>加粗</b>
強調 <em>強調</em> <em>強調</em>
上標 Za Z<sup>a</sup>
下標 Za Z<sub>a</sub>
鍵盤文本
 
<kbd>Ctrl</kbd>
換行    

18.格式化文本

保持輸入排版格式不變
注：對內含標籤須要破壞結構才能顯示

代碼

<pre>
hello world 
         hi
  hello world 
</pre>

演示

<pre>
hello world
hi
hello world
</pre>

錯誤解決方法
注：標籤內部添加空格 或者 直接使用```標記來處理
代碼1(插入空格)

<pre>
    < div>   
        < div>< /div>
        < div>< /div>
        < div>< /div>
    < /div>
</pre>

演示

<pre>
< div>
< div>< /div>
< div>< /div>
< div>< /div>
< /div>
</pre>

代碼2( ``` 代碼塊標記)

```
<div>   
    <div></div>
    <div></div>
    <div></div>
</div>
```

演示

<div>   
    <div></div>
    <div></div>
    <div></div>
</div>

19.公式 {#1}

注：1個$左對齊，2個居中

代碼

$$ x \href{why-equal.html}{=} y^2 + 1 $$
$ x = {-b \pm \sqrt{b^2-4ac} \over 2a}. $

演示

 

20.分隔符

注：最少三個 --- 或 ***或 * * *

代碼

***
---
* * *

演示

21.腳註

代碼

Markdown[^1]
[^1]: Markdown是一種純文本標記語言        // 在文章最後面顯示腳註

演示

Markdown[1]

22.錨點

代碼
注：只有標題支持錨點， 跳轉目錄方括號後 保持空格

[公式標題錨點](#1)### [須要跳轉的目錄] {#1} // 方括號後保持空格

演示

公式標題錨點

23.定義型列表

注：解釋型定義
代碼

Markdown 
:   輕量級文本標記語言，能夠轉換成html，pdf等格式  // 開頭一個`:` + `Tab` 或 四個空格

     
     
     

    
 
 
     

       代碼塊定義 
     
 
 
     
 
      
代碼塊定義……
 
      
  <span class="hljs-keyword"><span class="hljs-keyword">var</span></span> a = <span class="hljs-number"><span class="hljs-number">10</span></span>;         <span class="hljs-comment"><span class="hljs-comment">// 保持空一行與 遞進縮進</span></span>

 
     
 

    
<span class="hljs-keyword"><span class="hljs-keyword">var</span></span> a = <span class="hljs-number"><span class="hljs-number">10</span></span>;         <span class="hljs-comment"><span class="hljs-comment">// 保持空一行與 遞進縮進</span></span>

演示

 

24.自動郵箱連接

代碼

<xxx@outlook.com>

演示

xxx@outlook.com

25.流程圖

代碼1

```flow                     // 流程
st=>start: 開始|past:> http://www.baidu.com // 開始
e=>end: 結束              // 結束
c1=>condition: 條件1:>http://www.baidu.com[_parent] // 判斷條件
c2=>condition: 條件2      // 判斷條件
c3=>condition: 條件3      // 判斷條件
io=>inputoutput: 輸出     // 輸出
//----------------以上爲定義參數-------------------------

//----------------如下爲鏈接參數-------------------------
 // 開始->判斷條件1爲no->判斷條件2爲no->判斷條件3爲no->輸出->結束
 st->c1(yes,right)->c2(yes,right)->c3(yes,right)->io->e
 c1(no)->e // 條件1不知足->結束
 c2(no)->e // 條件2不知足->結束
 c3(no)->e // 條件3不知足->結束


</code></pre>
<p><strong>演示</strong></p>
<div class="image-package">
<div class="image-container" style="max-width: 635px; max-height: 281px; background-color: transparent;">
<div class="image-view" data-width="635" data-height="281"><img style="cursor: zoom-in;" src="//upload-images.jianshu.io/upload_images/6912209-972af6417eb7db1e.png" alt="" data-original-src="//upload-images.jianshu.io/upload_images/6912209-972af6417eb7db1e.png" data-original-width="635" data-original-height="281" data-original-format="image/png" data-original-filesize="13858"></div>
</div>
<div class="image-caption">&nbsp;</div>
</div>
<p><strong>代碼詳解</strong><br>
流程圖分爲兩個部分： <strong>定義參數</strong> 而後 <strong>鏈接參數</strong></p>
<p><strong>定義示例：</strong></p>
<pre class="hljs php"><code class="php hljs">tag=&gt;type: content:&gt;url         <span class="hljs-comment"><span class="hljs-comment">// 形參格式 </span></span>
st=&gt;start: 開始:&gt;http:<span class="hljs-comment"><span class="hljs-comment">//www.baidu.com[blank]  //實參格式</span></span>
</code></pre>
<p>注：** <code>st=&gt;start: 開始</code> 的<code>：</code>後面保持空格**</p>
<table>
<thead>
<tr><th>形參</th><th>實參</th><th>含義</th></tr>
</thead>
<tbody>
<tr>
<td>tag</td>
<td>st</td>
<td>標籤 (能夠自定義)</td>
</tr>
<tr>
<td>=&gt;</td>
<td>=&gt;</td>
<td>賦值</td>
</tr>
<tr>
<td>type</td>
<td>start</td>
<td>類型 (6種類型)</td>
</tr>
<tr>
<td>content</td>
<td>開始</td>
<td>描述內容 (能夠自定義)</td>
</tr>
<tr>
<td>:&gt;url</td>
<td><code>http://www.baidu.com[blank]</code></td>
<td>連接與跳轉方式 <strong>兼容性不好</strong></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr><th>6種類型</th><th>含義</th></tr>
</thead>
<tbody>
<tr>
<td>start</td>
<td>啓動</td>
</tr>
<tr>
<td>end</td>
<td>結束</td>
</tr>
<tr>
<td>operation</td>
<td>程序</td>
</tr>
<tr>
<td>subroutine</td>
<td>子程序</td>
</tr>
<tr>
<td>condition</td>
<td>條件</td>
</tr>
<tr>
<td>inputoutput</td>
<td>輸出</td>
</tr>
</tbody>
</table>
<p><strong>鏈接示例：</strong></p>
<pre class="hljs php"><code class="php hljs">st-&gt;c1(yes,right)-&gt;c2(yes,right)-&gt;c3(yes,right)-&gt;io-&gt;e
開始-&gt;判斷條件<span class="hljs-number"><span class="hljs-number">1</span></span>爲no-&gt;判斷條件<span class="hljs-number"><span class="hljs-number">2</span></span>爲no-&gt;判斷條件<span class="hljs-number"><span class="hljs-number">3</span></span>爲no-&gt;輸出-&gt;結束
</code></pre>
<table>
<thead>
<tr><th>形參</th><th>實參</th><th>含義</th></tr>
</thead>
<tbody>
<tr>
<td>-&gt;</td>
<td>-&gt;</td>
<td>鏈接</td>
</tr>
<tr>
<td>condition</td>
<td>c1</td>
<td>條件</td>
</tr>
<tr>
<td>(布爾值,方向)</td>
<td>(yes,right)</td>
<td>若是知足向右鏈接，4種方向：right ，left，up ，down 默認爲：down</td>
</tr>
</tbody>
</table>
<p>注：operation (程序); subroutine (子程序) ;condition (條件)，均可以在括號里加入鏈接方向。</p>
<pre class="hljs cpp"><code class="cpp hljs">operation(right) 
subroutine(left)
condition(yes,right)    <span class="hljs-comment"><span class="hljs-comment">// 只有條件 才能加布爾值</span></span>
</code></pre>
<hr>
<p><strong>代碼2</strong></p>
<p>注：添加樣式和url跳轉 須要添加第三方的腳本<br>
實際效果不好，使用起來麻煩，意義不大</p>
<pre class="hljs php"><code class="php hljs">```flow                             <span class="hljs-comment"><span class="hljs-comment">// 流程</span></span>
st=&gt;start: 啓動|past:&gt;http:<span class="hljs-comment"><span class="hljs-comment">//www.baidu.com[blank] // 開始</span></span>
e=&gt;end: 結束                      <span class="hljs-comment"><span class="hljs-comment">// 結束</span></span>
op1=&gt;operation: 方案一             <span class="hljs-comment"><span class="hljs-comment">// 運算1</span></span>
sub2=&gt;subroutine: 方案二|approved:&gt;http:<span class="hljs-comment"><span class="hljs-comment">//www.baidu.com[_parent]  // 運算2</span></span>
sub3=&gt;subroutine: 從新制定方案        <span class="hljs-comment"><span class="hljs-comment">// 運算2</span></span>
cond1=&gt;condition: 行不行？|request  <span class="hljs-comment"><span class="hljs-comment">// 判斷條件1</span></span>
cond2=&gt;condition: 行不行？          <span class="hljs-comment"><span class="hljs-comment">// 判斷條件2</span></span>
io=&gt;inputoutput: 結果滿意           <span class="hljs-comment"><span class="hljs-comment">// 輸出</span></span>

<span class="hljs-comment"><span class="hljs-comment">// 開始-&gt;方案1-&gt;判斷條件-&gt;</span></span>
st-&gt;op1-&gt;cond1
<span class="hljs-comment"><span class="hljs-comment">// 判斷條件1爲no-&gt;方案2-&gt;判斷條件2爲no-&gt;從新制定方案-&gt;方案1</span></span>
cond1(no,right)-&gt;sub2-&gt;cond2(no,right)-&gt;sub3(right)-&gt;op1
cond1(yes)-&gt;io-&gt;e       <span class="hljs-comment"><span class="hljs-comment">// 判斷條件知足-&gt;輸出-&gt;結束</span></span>
cond2(yes)-&gt;io-&gt;e       <span class="hljs-comment"><span class="hljs-comment">// 判斷條件知足-&gt;輸出-&gt;結束</span></span>

</code></pre>
<p><strong>演示</strong></p>
<div class="image-package">
<div class="image-container" style="max-width: 635px; max-height: 281px; background-color: transparent;">
<div class="image-view" data-width="635" data-height="281"><img style="cursor: zoom-in;" src="//upload-images.jianshu.io/upload_images/6912209-972af6417eb7db1e.png" alt="" data-original-src="//upload-images.jianshu.io/upload_images/6912209-972af6417eb7db1e.png" data-original-width="635" data-original-height="281" data-original-format="image/png" data-original-filesize="13858"></div>
</div>
<div class="image-caption">&nbsp;</div>
</div>
<p><strong>代碼詳解</strong><br>
流程圖分爲兩個部分： <strong>定義參數</strong> 而後 <strong>鏈接參數</strong></p>
<p><strong>定義示例：</strong></p>
<pre class="hljs php"><code class="php hljs">tag=&gt;type: content:&gt;url         <span class="hljs-comment"><span class="hljs-comment">// 形參格式 </span></span>
st=&gt;start: 開始:&gt;http:<span class="hljs-comment"><span class="hljs-comment">//www.baidu.com[blank]  //實參格式</span></span>
</code></pre>
<p>注：** <code>st=&gt;start: 開始</code> 的<code>：</code>後面保持空格**</p>
<table>
<thead>
<tr><th>形參</th><th>實參</th><th>含義</th></tr>
</thead>
<tbody>
<tr>
<td>tag</td>
<td>st</td>
<td>標籤 (能夠自定義)</td>
</tr>
<tr>
<td>=&gt;</td>
<td>=&gt;</td>
<td>賦值</td>
</tr>
<tr>
<td>type</td>
<td>start</td>
<td>類型 (6種類型)</td>
</tr>
<tr>
<td>content</td>
<td>開始</td>
<td>描述內容 (能夠自定義)</td>
</tr>
<tr>
<td>:&gt;url</td>
<td><code>http://www.baidu.com[blank]</code></td>
<td>連接與跳轉方式 <strong>兼容性不好</strong></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr><th>6種類型</th><th>含義</th></tr>
</thead>
<tbody>
<tr>
<td>start</td>
<td>啓動</td>
</tr>
<tr>
<td>end</td>
<td>結束</td>
</tr>
<tr>
<td>operation</td>
<td>程序</td>
</tr>
<tr>
<td>subroutine</td>
<td>子程序</td>
</tr>
<tr>
<td>condition</td>
<td>條件</td>
</tr>
<tr>
<td>inputoutput</td>
<td>輸出</td>
</tr>
</tbody>
</table>
<p><strong>鏈接示例：</strong></p>
<pre class="hljs php"><code class="php hljs">st-&gt;c1(yes,right)-&gt;c2(yes,right)-&gt;c3(yes,right)-&gt;io-&gt;e
開始-&gt;判斷條件<span class="hljs-number"><span class="hljs-number">1</span></span>爲no-&gt;判斷條件<span class="hljs-number"><span class="hljs-number">2</span></span>爲no-&gt;判斷條件<span class="hljs-number"><span class="hljs-number">3</span></span>爲no-&gt;輸出-&gt;結束
</code></pre>
<table>
<thead>
<tr><th>形參</th><th>實參</th><th>含義</th></tr>
</thead>
<tbody>
<tr>
<td>-&gt;</td>
<td>-&gt;</td>
<td>鏈接</td>
</tr>
<tr>
<td>condition</td>
<td>c1</td>
<td>條件</td>
</tr>
<tr>
<td>(布爾值,方向)</td>
<td>(yes,right)</td>
<td>若是知足向右鏈接，4種方向：right ，left，up ，down 默認爲：down</td>
</tr>
</tbody>
</table>
<p>注：operation (程序); subroutine (子程序) ;condition (條件)，均可以在括號里加入鏈接方向。</p>
<pre class="hljs cpp"><code class="cpp hljs">operation(right) 
subroutine(left)
condition(yes,right)    <span class="hljs-comment"><span class="hljs-comment">// 只有條件 才能加布爾值</span></span>
</code></pre>
<hr>
<p><strong>代碼2</strong></p>
<p>注：添加樣式和url跳轉 須要添加第三方的腳本<br>
實際效果不好，使用起來麻煩，意義不大</p>
<pre class="hljs php"><code class="php hljs">```flow                             <span class="hljs-comment"><span class="hljs-comment">// 流程</span></span>
st=&gt;start: 啓動|past:&gt;http:<span class="hljs-comment"><span class="hljs-comment">//www.baidu.com[blank] // 開始</span></span>
e=&gt;end: 結束                      <span class="hljs-comment"><span class="hljs-comment">// 結束</span></span>
op1=&gt;operation: 方案一             <span class="hljs-comment"><span class="hljs-comment">// 運算1</span></span>
sub2=&gt;subroutine: 方案二|approved:&gt;http:<span class="hljs-comment"><span class="hljs-comment">//www.baidu.com[_parent]  // 運算2</span></span>
sub3=&gt;subroutine: 從新制定方案        <span class="hljs-comment"><span class="hljs-comment">// 運算2</span></span>
cond1=&gt;condition: 行不行？|request  <span class="hljs-comment"><span class="hljs-comment">// 判斷條件1</span></span>
cond2=&gt;condition: 行不行？          <span class="hljs-comment"><span class="hljs-comment">// 判斷條件2</span></span>
io=&gt;inputoutput: 結果滿意           <span class="hljs-comment"><span class="hljs-comment">// 輸出</span></span>

<span class="hljs-comment"><span class="hljs-comment">// 開始-&gt;方案1-&gt;判斷條件-&gt;</span></span>
st-&gt;op1-&gt;cond1
<span class="hljs-comment"><span class="hljs-comment">// 判斷條件1爲no-&gt;方案2-&gt;判斷條件2爲no-&gt;從新制定方案-&gt;方案1</span></span>
cond1(no,right)-&gt;sub2-&gt;cond2(no,right)-&gt;sub3(right)-&gt;op1
cond1(yes)-&gt;io-&gt;e       <span class="hljs-comment"><span class="hljs-comment">// 判斷條件知足-&gt;輸出-&gt;結束</span></span>
cond2(yes)-&gt;io-&gt;e       <span class="hljs-comment"><span class="hljs-comment">// 判斷條件知足-&gt;輸出-&gt;結束</span></span>

演示

 

做者地址：flowchart.js

通常廣泛支持的效果

 

26.時序圖

代碼1

```sequence A->>B: 你好 Note left of A: 我在左邊 // 註釋方向，只有左右，沒有上下 Note right of B: 我在右邊 B-->A: 很高興認識你 ```

演示

 

代碼詳解

注：A->>B: 你好 後面能夠不寫文字，可是必定要在最後加上：
Note left of A 表明註釋在A的左邊

符號 含義
- 實線
> 實心箭頭
-- 虛線
>> 空心箭頭

代碼2

```sequence 起牀->吃飯: 稀飯油條 吃飯->上班: 不要遲到了 上班->午飯: 吃撐了 上班->下班: Note right of 下班: 下班了 下班->回家: Note right of 回家: 到家了 回家-->>起牀: Note left of 起牀: 新的一天 ```

演示

 

27.生成側邊欄擴展

注：生成側邊欄通常是插入JS，再就是模板,
整體來講，非常麻煩，效果通常，不做詳解。

做者倉庫：i5ting_ztree_toc

語法原文：https://www.jianshu.com/p/b03a8d7b1719

1.標題

代碼

注：# 後面保持空格

# h1
## h2
### h3
#### h4
##### h5
###### h6
####### h7 // 錯誤代碼
######## h8 // 錯誤代碼
######### h9 // 錯誤代碼
########## h10 // 錯誤代碼

演示

h1

h2

h3

h4

h5
h6

####### h7
######## h8
######### h9
########## h10

2.分級標題

代碼
注：= - 最少能夠只寫一個，兼容性通常

一級標題 ======================
二級標題 ---------------------

演示

 

3.TOC

注：根據標題生成目錄，兼容性通常

代碼

[TOC]

演示

 

4.引用

代碼1(單行式)

> hello world!

演示

hello world!

代碼2(多行式)

> hello world!
hello world!
hello world!

或者

> hello world!
> hello world!
> hello world!

演示

相同的結果

hello world!
hello world!
hello world!

代碼3(多層嵌套)

> aaaaaaaaa
>> bbbbbbbbb
>>> cccccccccc

演示

aaaaaaaaa

bbbbbbbbb

cccccccccc

5.行內標記

注：用 ` 標記代碼塊將變成一行

代碼

標記以外`hello world`標記以外

演示

標記以外hello world標記以外

錯誤代碼
注：不一樣平臺錯誤略有差別

標記以外 ` 
< div>   
    < div></div>
    < div></div>
    < div></div>
< /div>
`標記以外

演示

 

6.代碼塊

注：與上行距離一空行

代碼1(```)

注：用```生成塊

```
<div>   
    <div></div>
    <div></div>
    <div></div>
</div>
```

演示

<div>   
    <div></div>
    <div></div>
    <div></div>
</div>

代碼2(Tab)

注： Tab縮進

我是文字……

<span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">div</span></span></span><span class="hljs-tag">&gt;</span></span>   
    <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">div</span></span></span><span class="hljs-tag">&gt;</span></span><span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">div</span></span></span><span class="hljs-tag">&gt;</span></span>
    <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">div</span></span></span><span class="hljs-tag">&gt;</span></span><span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">div</span></span></span><span class="hljs-tag">&gt;</span></span>
    <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">div</span></span></span><span class="hljs-tag">&gt;</span></span><span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">div</span></span></span><span class="hljs-tag">&gt;</span></span>
<span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">div</span></span></span><span class="hljs-tag">&gt;</span></span>

<span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">div</span></span></span><span class="hljs-tag">&gt;</span></span>   
    <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">div</span></span></span><span class="hljs-tag">&gt;</span></span><span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">div</span></span></span><span class="hljs-tag">&gt;</span></span>
    <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">div</span></span></span><span class="hljs-tag">&gt;</span></span><span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">div</span></span></span><span class="hljs-tag">&gt;</span></span>
    <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">div</span></span></span><span class="hljs-tag">&gt;</span></span><span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">div</span></span></span><span class="hljs-tag">&gt;</span></span>
<span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">div</span></span></span><span class="hljs-tag">&gt;</span></span>

演示

<div>   
    <div></div>
    <div></div>
    <div></div>
</div>

代碼3(自定義語法)
注：根據不一樣的語言配置不一樣的代碼着色

```javascript var num = 0; for (var i = 0; i < 5; i++) { num+=i; } console.log(num); ```

演示

var num = 0;
for (var i = 0; i < 5; i++) {
    num+=i;
}
console.log(num);

7.插入連接

代碼1(內鏈式)
注：{:target="_blank"}跳轉方式兼容性通常 ，多數第三方平臺不支持跳轉

[百度1](http://www.baidu.com/" 百度一下"){:target="_blank"}

演示

百度1

代碼2(引用式)

[百度2][2]{:target="_blank"}
[2]: http://www.baidu.com/   "百度二下"

演示

百度2

8.插入圖片

代碼1(內鏈式)

![](./01.png '描述')

演示

 

代碼2(引用式)

![name][01]
[01]: ./01.png '描述'

演示

 

9.插入圖片帶有連接

代碼

[![](./01.png '百度')](http://www.baidu.com){:target="_blank"} // 內鏈式[![](./01.png '百度')][5]{:target="_blank"} // 引用式
 [5]: http://www.baidu.com

演示

 

 

[

 
][5]
[5]: http://www.baidu.com

 

10.視頻插入

注：Markdown 語法是不支持直接插入視頻的
廣泛的作法是 插入HTML的 iframe 框架，經過網站自帶的分享功能獲取，若是沒有能夠嘗試第二種方法
第二是僞造播放界面，實質是插入視頻圖片，而後經過點擊跳轉到相關頁面

代碼1
注：多數第三方平臺不支持插入<iframe>視頻

youku 
<iframe height=498 width=510 src='http://player.youku.com/embed/XMjgzNzM0NTYxNg==' frameborder=0 'allowfullscreen'></iframe>

演示

 

代碼2

[![](./youku2.png)](http://v.youku.com/v_show/id_XMjgzNzM0NTYxNg==.html?spm=a2htv.20009910.contentHolderUnit2.A&from=y1.3-tv-grid-1007-9910.86804.1-2#paction){:target="_blank"}

演示

 

 

11.序表

代碼1(有序)

注：序列.後 保持空格

1. one
2. two
3. three

演示

  1. one
  2. two
  3. three

代碼2(無序)

* one
* two
* three

演示

  • one
  • two
  • three

代碼3(序表嵌套)

1. one
 1. one-1
 2. two-2
2. two 
 * two-1
 * two-2

演示

  1. one
    1. one-1
    2. two-2
  2. two
    • two-1
    • two-2

代碼4(序表嵌套代碼塊)
注：換行+兩個Tab

* one

<span class="hljs-keyword"><span class="hljs-keyword">var</span></span> a = <span class="hljs-number"><span class="hljs-number">10</span></span>;     <span class="hljs-comment"><span class="hljs-comment">// 與上行保持空行並 遞進縮進</span></span>

<span class="hljs-keyword"><span class="hljs-keyword">var</span></span> a = <span class="hljs-number"><span class="hljs-number">10</span></span>;     <span class="hljs-comment"><span class="hljs-comment">// 與上行保持空行並 遞進縮進</span></span>

演示：

  • one

    var a = 10;

12.任務列表

注：兼容性通常 要隔開一行

代碼

這是文字……- [x] 選項一
 - [ ] 選項二
 - [ ] [選項3]

演示

 

13.表情

注：兼容通常

 

表情代碼地址

14.表格

注： : 表明對齊方式 ,** : 與 | 之間不要有空格**，不然對齊會有些不兼容

代碼1

| a |       b       | c |
|:-------:|:------------- | ----------:|
| 居中 |     左對齊    | 右對齊 |
|=========|===============|============|

演示

a b c
居中 左對齊 右對齊
========= =============== ============

代碼2(簡約寫法)

a  | b | c  
:-:|:- |-: 居中 |     左對齊      | 右對齊 ============|=================|=============

演示

a b c
居中 左對齊 右對齊
============ ================= =============

代碼3(特殊表格)

注：通常對合並單元格，以及其餘特殊格式表格，markdown 是無能爲力的
因此常規的作法是使用HTML標籤，可是這樣的編寫效率極低。
可是有了這款工具的話，全部問題都迎刃而解。

在線生成HTML代碼 Tables Generator (國外的站)

Tables Generator

演示

 

15.支持內嵌CSS樣式

代碼

<p style="color: #AD5D0F;font-size: 30px; font-family: '宋體';">內聯樣式</p>

演示

 

16.語義標記

描述 效果 代碼
斜體 斜體 *斜體*
斜體 斜體 _斜體_
加粗 加粗 **加粗**
加粗+斜體 加粗+斜體 ***加粗+斜體***
加粗+斜體 加粗+斜體 **_加粗+斜體_**
刪除線 刪除線 ~~刪除線~~

17.語義標籤

描述 效果 代碼
斜體 <i>斜體</i> <i>斜體</i>
加粗 <b>加粗</b> <b>加粗</b>
強調 <em>強調</em> <em>強調</em>
上標 Za Z<sup>a</sup>
下標 Za Z<sub>a</sub>
鍵盤文本
 
<kbd>Ctrl</kbd>
換行    

18.格式化文本

保持輸入排版格式不變
注：對內含標籤須要破壞結構才能顯示

代碼

<pre>
hello world 
         hi
  hello world 
</pre>

演示

<pre>
hello world
hi
hello world
</pre>

錯誤解決方法
注：標籤內部添加空格 或者 直接使用```標記來處理
代碼1(插入空格)

<pre>
    < div>   
        < div>< /div>
        < div>< /div>
        < div>< /div>
    < /div>
</pre>

演示

<pre>
< div>
< div>< /div>
< div>< /div>
< div>< /div>
< /div>
</pre>

代碼2( ``` 代碼塊標記)

```
<div>   
    <div></div>
    <div></div>
    <div></div>
</div>
```

演示

<div>   
    <div></div>
    <div></div>
    <div></div>
</div>

19.公式 {#1}

注：1個$左對齊，2個居中

代碼

$$ x \href{why-equal.html}{=} y^2 + 1 $$
$ x = {-b \pm \sqrt{b^2-4ac} \over 2a}. $

演示

 

20.分隔符

注：最少三個 --- 或 ***或 * * *

代碼

***
---
* * *

演示

21.腳註

代碼

Markdown[^1]
[^1]: Markdown是一種純文本標記語言        // 在文章最後面顯示腳註

演示

Markdown[1]

22.錨點

代碼
注：只有標題支持錨點， 跳轉目錄方括號後 保持空格

[公式標題錨點](#1)### [須要跳轉的目錄] {#1} // 方括號後保持空格

演示

公式標題錨點

23.定義型列表

注：解釋型定義
代碼

Markdown 
:   輕量級文本標記語言，能夠轉換成html，pdf等格式  // 開頭一個`:` + `Tab` 或 四個空格

     
     
     

    
 
 
     

       代碼塊定義 
     
 
 
     
 
      
代碼塊定義……
 
      
  <span class="hljs-keyword"><span class="hljs-keyword">var</span></span> a = <span class="hljs-number"><span class="hljs-number">10</span></span>;         <span class="hljs-comment"><span class="hljs-comment">// 保持空一行與 遞進縮進</span></span>

 
     
 

    
<span class="hljs-keyword"><span class="hljs-keyword">var</span></span> a = <span class="hljs-number"><span class="hljs-number">10</span></span>;         <span class="hljs-comment"><span class="hljs-comment">// 保持空一行與 遞進縮進</span></span>

演示

 

24.自動郵箱連接

代碼

<xxx@outlook.com>

演示

xxx@outlook.com

25.流程圖

代碼1

```flow                     // 流程
st=>start: 開始|past:> http://www.baidu.com // 開始
e=>end: 結束              // 結束
c1=>condition: 條件1:>http://www.baidu.com[_parent] // 判斷條件
c2=>condition: 條件2      // 判斷條件
c3=>condition: 條件3      // 判斷條件
io=>inputoutput: 輸出     // 輸出
//----------------以上爲定義參數-------------------------

//----------------如下爲鏈接參數-------------------------
 // 開始->判斷條件1爲no->判斷條件2爲no->判斷條件3爲no->輸出->結束
 st->c1(yes,right)->c2(yes,right)->c3(yes,right)->io->e
 c1(no)->e // 條件1不知足->結束
 c2(no)->e // 條件2不知足->結束
 c3(no)->e // 條件3不知足->結束


</code></pre>
<p><strong>演示</strong></p>
<div class="image-package">
<div class="image-container" style="max-width: 635px; max-height: 281px; background-color: transparent;">
<div class="image-view" data-width="635" data-height="281"><img style="cursor: zoom-in;" src="//upload-images.jianshu.io/upload_images/6912209-972af6417eb7db1e.png" alt="" data-original-src="//upload-images.jianshu.io/upload_images/6912209-972af6417eb7db1e.png" data-original-width="635" data-original-height="281" data-original-format="image/png" data-original-filesize="13858"></div>
</div>
<div class="image-caption">&nbsp;</div>
</div>
<p><strong>代碼詳解</strong><br>
流程圖分爲兩個部分： <strong>定義參數</strong> 而後 <strong>鏈接參數</strong></p>
<p><strong>定義示例：</strong></p>
<pre class="hljs php"><code class="php hljs">tag=&gt;type: content:&gt;url         <span class="hljs-comment"><span class="hljs-comment">// 形參格式 </span></span>
st=&gt;start: 開始:&gt;http:<span class="hljs-comment"><span class="hljs-comment">//www.baidu.com[blank]  //實參格式</span></span>
</code></pre>
<p>注：** <code>st=&gt;start: 開始</code> 的<code>：</code>後面保持空格**</p>
<table>
<thead>
<tr><th>形參</th><th>實參</th><th>含義</th></tr>
</thead>
<tbody>
<tr>
<td>tag</td>
<td>st</td>
<td>標籤 (能夠自定義)</td>
</tr>
<tr>
<td>=&gt;</td>
<td>=&gt;</td>
<td>賦值</td>
</tr>
<tr>
<td>type</td>
<td>start</td>
<td>類型 (6種類型)</td>
</tr>
<tr>
<td>content</td>
<td>開始</td>
<td>描述內容 (能夠自定義)</td>
</tr>
<tr>
<td>:&gt;url</td>
<td><code>http://www.baidu.com[blank]</code></td>
<td>連接與跳轉方式 <strong>兼容性不好</strong></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr><th>6種類型</th><th>含義</th></tr>
</thead>
<tbody>
<tr>
<td>start</td>
<td>啓動</td>
</tr>
<tr>
<td>end</td>
<td>結束</td>
</tr>
<tr>
<td>operation</td>
<td>程序</td>
</tr>
<tr>
<td>subroutine</td>
<td>子程序</td>
</tr>
<tr>
<td>condition</td>
<td>條件</td>
</tr>
<tr>
<td>inputoutput</td>
<td>輸出</td>
</tr>
</tbody>
</table>
<p><strong>鏈接示例：</strong></p>
<pre class="hljs php"><code class="php hljs">st-&gt;c1(yes,right)-&gt;c2(yes,right)-&gt;c3(yes,right)-&gt;io-&gt;e
開始-&gt;判斷條件<span class="hljs-number"><span class="hljs-number">1</span></span>爲no-&gt;判斷條件<span class="hljs-number"><span class="hljs-number">2</span></span>爲no-&gt;判斷條件<span class="hljs-number"><span class="hljs-number">3</span></span>爲no-&gt;輸出-&gt;結束
</code></pre>
<table>
<thead>
<tr><th>形參</th><th>實參</th><th>含義</th></tr>
</thead>
<tbody>
<tr>
<td>-&gt;</td>
<td>-&gt;</td>
<td>鏈接</td>
</tr>
<tr>
<td>condition</td>
<td>c1</td>
<td>條件</td>
</tr>
<tr>
<td>(布爾值,方向)</td>
<td>(yes,right)</td>
<td>若是知足向右鏈接，4種方向：right ，left，up ，down 默認爲：down</td>
</tr>
</tbody>
</table>
<p>注：operation (程序); subroutine (子程序) ;condition (條件)，均可以在括號里加入鏈接方向。</p>
<pre class="hljs cpp"><code class="cpp hljs">operation(right) 
subroutine(left)
condition(yes,right)    <span class="hljs-comment"><span class="hljs-comment">// 只有條件 才能加布爾值</span></span>
</code></pre>
<hr>
<p><strong>代碼2</strong></p>
<p>注：添加樣式和url跳轉 須要添加第三方的腳本<br>
實際效果不好，使用起來麻煩，意義不大</p>
<pre class="hljs php"><code class="php hljs">```flow                             <span class="hljs-comment"><span class="hljs-comment">// 流程</span></span>
st=&gt;start: 啓動|past:&gt;http:<span class="hljs-comment"><span class="hljs-comment">//www.baidu.com[blank] // 開始</span></span>
e=&gt;end: 結束                      <span class="hljs-comment"><span class="hljs-comment">// 結束</span></span>
op1=&gt;operation: 方案一             <span class="hljs-comment"><span class="hljs-comment">// 運算1</span></span>
sub2=&gt;subroutine: 方案二|approved:&gt;http:<span class="hljs-comment"><span class="hljs-comment">//www.baidu.com[_parent]  // 運算2</span></span>
sub3=&gt;subroutine: 從新制定方案        <span class="hljs-comment"><span class="hljs-comment">// 運算2</span></span>
cond1=&gt;condition: 行不行？|request  <span class="hljs-comment"><span class="hljs-comment">// 判斷條件1</span></span>
cond2=&gt;condition: 行不行？          <span class="hljs-comment"><span class="hljs-comment">// 判斷條件2</span></span>
io=&gt;inputoutput: 結果滿意           <span class="hljs-comment"><span class="hljs-comment">// 輸出</span></span>

<span class="hljs-comment"><span class="hljs-comment">// 開始-&gt;方案1-&gt;判斷條件-&gt;</span></span>
st-&gt;op1-&gt;cond1
<span class="hljs-comment"><span class="hljs-comment">// 判斷條件1爲no-&gt;方案2-&gt;判斷條件2爲no-&gt;從新制定方案-&gt;方案1</span></span>
cond1(no,right)-&gt;sub2-&gt;cond2(no,right)-&gt;sub3(right)-&gt;op1
cond1(yes)-&gt;io-&gt;e       <span class="hljs-comment"><span class="hljs-comment">// 判斷條件知足-&gt;輸出-&gt;結束</span></span>
cond2(yes)-&gt;io-&gt;e       <span class="hljs-comment"><span class="hljs-comment">// 判斷條件知足-&gt;輸出-&gt;結束</span></span>

</code></pre>
<p><strong>演示</strong></p>
<div class="image-package">
<div class="image-container" style="max-width: 635px; max-height: 281px; background-color: transparent;">
<div class="image-view" data-width="635" data-height="281"><img style="cursor: zoom-in;" src="//upload-images.jianshu.io/upload_images/6912209-972af6417eb7db1e.png" alt="" data-original-src="//upload-images.jianshu.io/upload_images/6912209-972af6417eb7db1e.png" data-original-width="635" data-original-height="281" data-original-format="image/png" data-original-filesize="13858"></div>
</div>
<div class="image-caption">&nbsp;</div>
</div>
<p><strong>代碼詳解</strong><br>
流程圖分爲兩個部分： <strong>定義參數</strong> 而後 <strong>鏈接參數</strong></p>
<p><strong>定義示例：</strong></p>
<pre class="hljs php"><code class="php hljs">tag=&gt;type: content:&gt;url         <span class="hljs-comment"><span class="hljs-comment">// 形參格式 </span></span>
st=&gt;start: 開始:&gt;http:<span class="hljs-comment"><span class="hljs-comment">//www.baidu.com[blank]  //實參格式</span></span>
</code></pre>
<p>注：** <code>st=&gt;start: 開始</code> 的<code>：</code>後面保持空格**</p>
<table>
<thead>
<tr><th>形參</th><th>實參</th><th>含義</th></tr>
</thead>
<tbody>
<tr>
<td>tag</td>
<td>st</td>
<td>標籤 (能夠自定義)</td>
</tr>
<tr>
<td>=&gt;</td>
<td>=&gt;</td>
<td>賦值</td>
</tr>
<tr>
<td>type</td>
<td>start</td>
<td>類型 (6種類型)</td>
</tr>
<tr>
<td>content</td>
<td>開始</td>
<td>描述內容 (能夠自定義)</td>
</tr>
<tr>
<td>:&gt;url</td>
<td><code>http://www.baidu.com[blank]</code></td>
<td>連接與跳轉方式 <strong>兼容性不好</strong></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr><th>6種類型</th><th>含義</th></tr>
</thead>
<tbody>
<tr>
<td>start</td>
<td>啓動</td>
</tr>
<tr>
<td>end</td>
<td>結束</td>
</tr>
<tr>
<td>operation</td>
<td>程序</td>
</tr>
<tr>
<td>subroutine</td>
<td>子程序</td>
</tr>
<tr>
<td>condition</td>
<td>條件</td>
</tr>
<tr>
<td>inputoutput</td>
<td>輸出</td>
</tr>
</tbody>
</table>
<p><strong>鏈接示例：</strong></p>
<pre class="hljs php"><code class="php hljs">st-&gt;c1(yes,right)-&gt;c2(yes,right)-&gt;c3(yes,right)-&gt;io-&gt;e
開始-&gt;判斷條件<span class="hljs-number"><span class="hljs-number">1</span></span>爲no-&gt;判斷條件<span class="hljs-number"><span class="hljs-number">2</span></span>爲no-&gt;判斷條件<span class="hljs-number"><span class="hljs-number">3</span></span>爲no-&gt;輸出-&gt;結束
</code></pre>
<table>
<thead>
<tr><th>形參</th><th>實參</th><th>含義</th></tr>
</thead>
<tbody>
<tr>
<td>-&gt;</td>
<td>-&gt;</td>
<td>鏈接</td>
</tr>
<tr>
<td>condition</td>
<td>c1</td>
<td>條件</td>
</tr>
<tr>
<td>(布爾值,方向)</td>
<td>(yes,right)</td>
<td>若是知足向右鏈接，4種方向：right ，left，up ，down 默認爲：down</td>
</tr>
</tbody>
</table>
<p>注：operation (程序); subroutine (子程序) ;condition (條件)，均可以在括號里加入鏈接方向。</p>
<pre class="hljs cpp"><code class="cpp hljs">operation(right) 
subroutine(left)
condition(yes,right)    <span class="hljs-comment"><span class="hljs-comment">// 只有條件 才能加布爾值</span></span>
</code></pre>
<hr>
<p><strong>代碼2</strong></p>
<p>注：添加樣式和url跳轉 須要添加第三方的腳本<br>
實際效果不好，使用起來麻煩，意義不大</p>
<pre class="hljs php"><code class="php hljs">```flow                             <span class="hljs-comment"><span class="hljs-comment">// 流程</span></span>
st=&gt;start: 啓動|past:&gt;http:<span class="hljs-comment"><span class="hljs-comment">//www.baidu.com[blank] // 開始</span></span>
e=&gt;end: 結束                      <span class="hljs-comment"><span class="hljs-comment">// 結束</span></span>
op1=&gt;operation: 方案一             <span class="hljs-comment"><span class="hljs-comment">// 運算1</span></span>
sub2=&gt;subroutine: 方案二|approved:&gt;http:<span class="hljs-comment"><span class="hljs-comment">//www.baidu.com[_parent]  // 運算2</span></span>
sub3=&gt;subroutine: 從新制定方案        <span class="hljs-comment"><span class="hljs-comment">// 運算2</span></span>
cond1=&gt;condition: 行不行？|request  <span class="hljs-comment"><span class="hljs-comment">// 判斷條件1</span></span>
cond2=&gt;condition: 行不行？          <span class="hljs-comment"><span class="hljs-comment">// 判斷條件2</span></span>
io=&gt;inputoutput: 結果滿意           <span class="hljs-comment"><span class="hljs-comment">// 輸出</span></span>

<span class="hljs-comment"><span class="hljs-comment">// 開始-&gt;方案1-&gt;判斷條件-&gt;</span></span>
st-&gt;op1-&gt;cond1
<span class="hljs-comment"><span class="hljs-comment">// 判斷條件1爲no-&gt;方案2-&gt;判斷條件2爲no-&gt;從新制定方案-&gt;方案1</span></span>
cond1(no,right)-&gt;sub2-&gt;cond2(no,right)-&gt;sub3(right)-&gt;op1
cond1(yes)-&gt;io-&gt;e       <span class="hljs-comment"><span class="hljs-comment">// 判斷條件知足-&gt;輸出-&gt;結束</span></span>
cond2(yes)-&gt;io-&gt;e       <span class="hljs-comment"><span class="hljs-comment">// 判斷條件知足-&gt;輸出-&gt;結束</span></span>

演示

 

做者地址：flowchart.js

通常廣泛支持的效果

 

26.時序圖

代碼1

```sequence A->>B: 你好 Note left of A: 我在左邊 // 註釋方向，只有左右，沒有上下 Note right of B: 我在右邊 B-->A: 很高興認識你 ```

演示

 

代碼詳解

注：A->>B: 你好 後面能夠不寫文字，可是必定要在最後加上：
Note left of A 表明註釋在A的左邊

符號 含義
- 實線
> 實心箭頭
-- 虛線
>> 空心箭頭

代碼2

```sequence 起牀->吃飯: 稀飯油條 吃飯->上班: 不要遲到了 上班->午飯: 吃撐了 上班->下班: Note right of 下班: 下班了 下班->回家: Note right of 回家: 到家了 回家-->>起牀: Note left of 起牀: 新的一天 ```

演示

 

27.生成側邊欄擴展

注：生成側邊欄通常是插入JS，再就是模板,
整體來講，非常麻煩，效果通常，不做詳解。

做者倉庫：i5ting_ztree_toc



做者：歐薇婭
連接：https://www.jianshu.com/p/b03a8d7b1719來源：簡書著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程