Markdown 语法和 MWeb 写作使用说明
115 | 116 |Markdown 的设计哲学
117 | 118 |119 |123 | 124 | 125 | 126 |Markdown 的目標是實現「易讀易寫」。
122 |
120 | 不過最需要強調的便是它的可讀性。一份使用 Markdown 格式撰寫的文件應該可以直接以純文字發佈，並且看起來不會像是由許多標籤或是格式指令所構成。
121 | Markdown 的語法有個主要的目的：用來作為一種網路內容的寫作用語言。
本文约定
127 | 128 |如果有写 效果如下：， 在 MWeb 编辑状态下只有用 CMD + 4 或 CMD + R 预览才可以看效果。
标题
131 | 132 |Markdown 语法：
133 | 134 |# 第一级标题 `<h1>`
135 | ## 第二级标题 `<h2>`
136 | ###### 第六级标题 `<h6>`
137 | 效果如下：
140 | 141 |第一级标题 <h1>
142 |
143 | 第二级标题 <h2>
144 |
145 | 第六级标题 <h6>
146 |
147 | 强调
148 | 149 |Markdown 语法：
150 | 151 |*这些文字会生成`<em>`*
152 | _这些文字会生成`<u>`_
153 |
154 | **这些文字会生成`<strong>`**
155 | __这些文字会生成`<strong>`__
156 | 在 MWeb 中的快捷键为： CMD + U、CMD + I、CMD + B
159 | 效果如下：
这些文字会生成<em>
162 | 这些文字会生成<u>
这些文字会生成<strong>
165 | 这些文字会生成<strong>
换行
168 | 169 |四个及以上空格加回车。
170 | 如果不想打这么多空格，只要回车就为换行，请勾选：Preferences - Themes - Translate newlines to <br> tags
列表
173 | 174 |无序列表
175 | 176 |Markdown 语法：
177 | 178 |* 项目一 无序列表 `* + 空格键`
179 | * 项目二
180 | * 项目二的子项目一 无序列表 `TAB + * + 空格键`
181 | * 项目二的子项目二
182 | 在 MWeb 中的快捷键为： Option + U
185 | 效果如下：
-
188 |
- 项目一 无序列表
* + 空格键
189 | - 项目二 190 |
- 项目二的子项目一 无序列表
TAB + * + 空格键
191 | - 项目二的子项目二 192 |
有序列表
195 | 196 |Markdown 语法：
197 | 198 |1. 项目一 有序列表 `数字 + . + 空格键`
199 | 2. 项目二
200 | 3. 项目三
201 | 1. 项目三的子项目一 有序列表 `TAB + 数字 + . + 空格键`
202 | 2. 项目三的子项目二
203 | 效果如下：
206 | 207 |-
208 |
- 项目一 有序列表
数字 + . + 空格键
209 | - 项目二 210 |
- 项目三 211 |
- 项目三的子项目一 有序列表
TAB + 数字 + . + 空格键
212 | - 项目三的子项目二 213 |
任务列表（Task lists）
216 | 217 |Markdown 语法：
218 | 219 |- [ ] 任务一 未做任务 `- + 空格 + [ ]`
220 | - [x] 任务二 已做任务 `- + 空格 + [x]`
221 | 效果如下：
224 | 225 |-
226 |
- 任务一 未做任务
- + 空格 + [ ]227 |
228 | - 任务二 已做任务
- + 空格 + [x]229 |
230 |
图片
233 | 234 |Markdown 语法：
235 | 236 |
237 | 格式: 
238 | Control + Shift + I 可插入Markdown语法。
241 | 如果是 MWeb 的文档库中的文档，还可以用拖放图片、CMD + V 粘贴、CMD + Option + I 导入这三种方式来增加图片。
242 | 效果如下：
MWeb 引入的特别的语法来设置图片宽度，方法是在图片描述后加 -w + 图片宽度 即可，比如说要设置上面的图片的宽度为 140，语法如下：

链接
253 | 254 |Markdown 语法：
255 | 256 |email <example@example.com>
257 | [GitHub](http://github.com)
258 | 自动生成连接 <http://www.github.com/>
259 | Control + Shift + L 可插入Markdown语法。
262 | 如果是 MWeb 的文档库中的文档，拖放或CMD + Option + I 导入非图片时，会生成连接。
263 | 效果如下：
Email 连接： example@example.com
266 | 连接标题Github网站
267 | 自动生成连接像： http://www.github.com/ 这样
区块引用
270 | 271 |Markdown 语法：
272 | 273 |某某说:
274 | > 第一行引用
275 | > 第二行费用文字
276 | CMD + Shift + B 可插入Markdown语法。
279 | 效果如下：
某某说:
282 | 283 |284 |287 | 288 |第一行引用
286 |
285 | 第二行费用文字
行内代码
289 | 290 |Markdown 语法：
291 | 292 |像这样即可：`<addr>` `code`
293 | CMD + K 可插入Markdown语法。
296 | 效果如下：
像这样即可：<addr> code
多行或者一段代码
301 | 302 |Markdown 语法：
303 | 304 |```js
305 | function fancyAlert(arg) {
306 | if(arg) {
307 | $.facebox({div:'#foo'})
308 | }
309 |
310 | }
311 | ```
312 | CMD + Shift + K 可插入Markdown语法。
315 | 效果如下：
function fancyAlert(arg) {
318 | if(arg) {
319 | $.facebox({div:'#foo'})
320 | }
321 |
322 | }
323 | 顺序图或流程图
326 | 327 |Markdown 语法：
328 | 329 |```sequence
330 | 张三->李四: 嘿，小四儿, 写博客了没?
331 | Note right of 李四: 李四愣了一下，说：
332 | 李四-->张三: 忙得吐血，哪有时间写。
333 | ```
334 |
335 | ```flow
336 | st=>start: 开始
337 | e=>end: 结束
338 | op=>operation: 我的操作
339 | cond=>condition: 确认？
340 |
341 | st->op->cond
342 | cond(yes)->e
343 | cond(no)->op
344 | ```
345 | 效果如下（ Preferences - Themes - Enable sequence & flow chart 才会看到效果 ）：
张三->李四: 嘿，小四儿, 写博客了没?
350 | Note right of 李四: 李四愣了一下，说：
351 | 李四-->张三: 忙得吐血，哪有时间写。
352 | st=>start: 页面加载
355 |
356 | op1=>operation: hightlight.js处理<code>
357 | op2=>operation: 解析css并填入HTML的 style中
358 |
359 | cond=>condition: 是否生成ENML
360 | op3=>operation: 修改id属性为name等等的转换操作
361 | op5=>end: 除去style、script标签，生成 ENML
362 | op4=>end: 除去style、script标签，生成
363 | 纯html
364 |
365 | st->op1->op2->cond
366 | cond(yes)->op3
367 | cond(no)->op4
368 | op3->op5
369 | 更多请参考：http://bramp.github.io/js-sequence-diagrams/, http://adrai.github.io/flowchart.js/
372 | 373 |表格
374 | 375 |Markdown 语法：
376 | 377 |第一格表头 | 第二格表头
378 | --------- | -------------
379 | 内容单元格 第一列第一格 | 内容单元格第二列第一格
380 | 内容单元格 第一列第二格 多加文字 | 内容单元格第二列第二格
381 | 效果如下：
384 | 385 || 第一格表头 | 389 |第二格表头 | 390 |
|---|---|
| 内容单元格 第一列第一格 | 396 |内容单元格第二列第一格 | 397 |
| 内容单元格 第一列第二格 多加文字 | 400 |内容单元格第二列第二格 | 401 |
删除线
406 | 407 |Markdown 语法：
408 | 409 |加删除线像这样用： 删除这些
效果如下：
412 | 413 |加删除线像这样用： 删除这些
分隔线
416 | 417 |以下三种方式都可以生成分隔线：
418 | 419 |***
420 |
421 | *****
422 |
423 | - - -
424 | 效果如下：
427 | 428 |429 | 430 |
431 | 432 |
433 | 434 |
MathJax
435 | 436 |Markdown 语法：
437 | 438 |块级公式：
439 | $$ x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$
440 |
441 | \\[ \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} =
442 | 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}}
443 | {1+\frac{e^{-8\pi}} {1+\ldots} } } } \\]
444 |
445 | 行内公式： $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$
446 | 效果如下（Preferences - Themes - Enable MathJax 才会看到效果）：
块级公式：
451 | \[ x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a} \]
452 |
453 | \[ \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} =
454 | 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}}
455 | {1+\frac{e^{-8\pi}} {1+\ldots} } } } \]
456 |
457 | 454 | 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}}
455 | {1+\frac{e^{-8\pi}} {1+\ldots} } } } \]
行内公式： \(\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N\)
脚注（Footnote）
460 | 461 |Markdown 语法：
462 | 463 |这是一个脚注：[^sample_footnote]
464 | 效果如下：
467 | 468 |这是一个脚注：1
469 | 470 |注释和阅读更多
471 | 472 | 473 | 474 | 475 | 476 |Actions->Insert Read More Comment 或者 Command + .
477 | 注 阅读更多的功能只用在生成网站或博客时，插入时注意要后空一行。
TOC
480 | 481 |Markdown 语法：
482 | 483 |[TOC]
484 | 效果如下：
487 | 488 |-
489 |
-
490 | Markdown 语法和 MWeb 写作使用说明
491 |
-
492 |
- 493 | Markdown 的设计哲学 494 | 495 |
- 496 | 本文约定 497 | 498 |
- 499 | 标题 500 | 501 |
503 | -
504 | 第一级标题
<h1>505 |-
506 |
-
507 | 第二级标题
<h2>508 |-
509 |
-
510 |
-
511 |
-
512 |
-
513 |
-
514 |
-
515 |
-
516 | 第六级标题
<h6>517 |
518 |
520 | -
516 | 第六级标题
522 | -
514 |
524 | -
512 |
526 | -
510 |
- 527 | 强调 528 | 529 |
- 530 | 换行 531 | 532 |
-
533 | 列表
534 |
-
535 |
- 536 | 无序列表 537 | 538 |
- 539 | 有序列表 540 | 541 |
- 542 | 任务列表（Task lists） 543 | 544 |
546 | - 547 | 图片 548 | 549 |
- 550 | 链接 551 | 552 |
- 553 | 区块引用 554 | 555 |
- 556 | 行内代码 557 | 558 |
- 559 | 多行或者一段代码 560 | 561 |
- 562 | 顺序图或流程图 563 | 564 |
- 565 | 表格 566 | 567 |
- 568 | 删除线 569 | 570 |
- 571 | 分隔线 572 | 573 |
- 574 | MathJax 575 | 576 |
- 577 | 脚注（Footnote） 578 | 579 |
- 580 | 注释和阅读更多 581 | 582 |
- 583 | TOC 584 | 585 |
587 | -
507 | 第二级标题
-
588 | 测试 Markdown 文档
589 |
-
590 |
- 591 | Mermaid 样例 592 | 600 | 601 |
- 602 | PlantUML 样例 603 | 611 | 612 |
- 613 | ECharts 样例 614 | 622 | 623 |
625 |
测试 Markdown 文档
629 | 630 |Mermaid 样例
631 | 632 |样例一
633 | 634 |graph TB
635 | subgraph one
636 | a1-->a2
637 | end
638 | subgraph two
639 | b1-->b2
640 | end
641 | subgraph three
642 | c1-->c2
643 | end
644 | c1-->a2
645 | 样例二
648 | 649 |graph TD
650 | B["fa:fa-twitter for peace"]
651 | B-->C[fa:fa-ban forbidden]
652 | B-->D(fa:fa-spinner);
653 | B-->E(A fa:fa-camera-retro perhaps?);
654 | PlantUML 样例
657 | 658 |样例一
659 | 660 |actor Bob #red
661 | ' The only difference between actor
662 | 'and participant is the drawing
663 | participant Alice
664 | participant "I have a really\nlong name" as L #99FF99
665 | /' You can also declare:
666 | participant L as "I have a really\nlong name" #99FF99
667 | '/
668 |
669 | Alice->Bob: Authentication Request
670 | Bob->Alice: Authentication Response
671 | Bob->L: Log transaction
672 | 样例二
675 | 676 |Alice -> "Bob()" : Hello
677 | "Bob()" -> "This is very\nlong" as Long
678 | ' You can also declare:
679 | ' "Bob()" -> Long as "This is very\nlong"
680 | Long --> "Bob()" : ok
681 | ECharts 样例
684 | 685 |样例一
686 | 687 |option = {
688 | animation:false,
689 | title : {
690 | text: '某站点用户访问来源',
691 | subtext: '纯属虚构',
692 | x:'center'
693 | },
694 | tooltip : {
695 | trigger: 'item',
696 | formatter: "{a} <br/>{b} : {c} ({d}%)"
697 | },
698 | legend: {
699 | orient: 'vertical',
700 | left: 'left',
701 | data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
702 | },
703 | series : [
704 | {
705 | name: '访问来源',
706 | type: 'pie',
707 | radius : '55%',
708 | center: ['50%', '60%'],
709 | data:[
710 | {value:335, name:'直接访问'},
711 | {value:310, name:'邮件营销'},
712 | {value:234, name:'联盟广告'},
713 | {value:135, name:'视频广告'},
714 | {value:1548, name:'搜索引擎'}
715 | ],
716 | itemStyle: {
717 | emphasis: {
718 | shadowBlur: 10,
719 | shadowOffsetX: 0,
720 | shadowColor: 'rgba(0, 0, 0, 0.5)'
721 | }
722 | }
723 | }
724 | ]
725 | };
726 | 样例二
729 | 730 |option = {
731 | animation:false,
732 | tooltip : {
733 | trigger: 'axis',
734 | axisPointer : { // 坐标轴指示器，坐标轴触发有效
735 | type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
736 | }
737 | },
738 | legend: {
739 | data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎','百度','谷歌','必应','其他']
740 | },
741 | grid: {
742 | left: '3%',
743 | right: '4%',
744 | bottom: '3%',
745 | containLabel: true
746 | },
747 | xAxis : [
748 | {
749 | type : 'category',
750 | data : ['周一','周二','周三','周四','周五','周六','周日']
751 | }
752 | ],
753 | yAxis : [
754 | {
755 | type : 'value'
756 | }
757 | ],
758 | series : [
759 | {
760 | name:'直接访问',
761 | type:'bar',
762 | data:[320, 332, 301, 334, 390, 330, 320]
763 | },
764 | {
765 | name:'邮件营销',
766 | type:'bar',
767 | stack: '广告',
768 | data:[120, 132, 101, 134, 90, 230, 210]
769 | },
770 | {
771 | name:'联盟广告',
772 | type:'bar',
773 | stack: '广告',
774 | data:[220, 182, 191, 234, 290, 330, 310]
775 | },
776 | {
777 | name:'视频广告',
778 | type:'bar',
779 | stack: '广告',
780 | data:[150, 232, 201, 154, 190, 330, 410]
781 | },
782 | {
783 | name:'搜索引擎',
784 | type:'bar',
785 | data:[862, 1018, 964, 1026, 1679, 1600, 1570],
786 | markLine : {
787 | lineStyle: {
788 | normal: {
789 | type: 'dashed'
790 | }
791 | },
792 | data : [
793 | [{type : 'min'}, {type : 'max'}]
794 | ]
795 | }
796 | },
797 | {
798 | name:'百度',
799 | type:'bar',
800 | barWidth : 5,
801 | stack: '搜索引擎',
802 | data:[620, 732, 701, 734, 1090, 1130, 1120]
803 | },
804 | {
805 | name:'谷歌',
806 | type:'bar',
807 | stack: '搜索引擎',
808 | data:[120, 132, 101, 134, 290, 230, 220]
809 | },
810 | {
811 | name:'必应',
812 | type:'bar',
813 | stack: '搜索引擎',
814 | data:[60, 72, 71, 74, 190, 130, 110]
815 | },
816 | {
817 | name:'其他',
818 | type:'bar',
819 | stack: '搜索引擎',
820 | data:[62, 82, 91, 84, 109, 110, 120]
821 | }
822 | ]
823 | };
824 |
827 |
828 |
836 |
837 |
838 |
839 |
840 | 828 |
-
829 |
830 |
-
831 |
这里是脚注信息 ↩
832 |
833 |
834 |