经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 程序设计 » PHP » 查看文章
快看!markdown的语法原来如此简单~
来源:cnblogs  作者:神兵小将2016  时间:2020/11/23 12:23:00  对本文有异议

file

写在前面的话

写在越来越多的人使用markdown编辑器,是因为它比较简洁方便快捷,能满足大家的需要,今天我们就一起来看一下markdown的基本语法。

特别提示:后面都需要加上半角空格才生效。

标题

在想要设置为标题的文字前面加# 来表示,一个#是一级标题,二个#是二级标题,以此类推。支持六级标题。

示例:

  1. # 标题H1
  2. ## 标题H2
  3. ### 标题H3
  4. #### 标题H4
  5. ##### 标题H5
  6. ###### 标题H5

效果如下:

标题H1

标题H2

标题H3

标题H4

标题H5
标题H5

字符效果和横线等

实例:

  1. ----
  2. ~~删除线~~ <s>删除线(开启识别HTML标签时)</s>
  3. *斜体字* _斜体字_
  4. **粗体** __粗体__
  5. ***粗斜体*** ___粗斜体___
  6. 上标:X<sub>2</sub>,下标:O<sup>2</sup>
  7. **缩写(同HTMLabbr标签)**
  8. > 即更长的单词或短语的缩写形式,前提是开启识别HTML标签时,已默认开启
  9. The <abbr title="Hyper Text Markup Language">HTML</abbr> specification is maintained by the <abbr title="World Wide Web Consortium">W3C</abbr>.

效果如下:

字符效果和横线等


删除线 删除线(开启识别HTML标签时)

斜体字 斜体字

粗体 粗体

粗斜体 粗斜体

上标:X2,下标:O2

缩写(同HTML的abbr标签)

即更长的单词或短语的缩写形式,前提是开启识别HTML标签时,已默认开启

The HTML specification is maintained by the W3C.

引用 Blockquotes

在引用的文字前加>即可。引用也可以嵌套,如加两个>>三个>>>
实例:

  1. > 引用文本 Blockquotes
  2. > 引用:如果想要插入空白换行`即<br />标签`,在插入处先键入两个以上的空格然后回车即可,[普通链接](https://www.wjcms.net/)。

效果如下:

引用文本 Blockquotes

引用:如果想要插入空白换行即<br />标签,在插入处先键入两个以上的空格然后回车即可,普通链接

锚点与链接 Links

实例:

  1. [普通链接](https://www.wjcms.net/)
  2. [普通链接带标题](https://www.wjcms.net/ "普通链接带标题")
  3. 直接链接:<https://www.wjcms.net/>
  4. [锚点链接][maodian-id]
  5. [maodian-id]: https://www.wjcms.net/
  6. [mailto:wjcms@qq.com](mailto:wjcms@qq.com)
  7. GFM a-tail link @wjcms
  8. 邮箱地址自动链接 wjcms@qq.com www@vip.qq.com
  9. > @wjcms

效果如下:
普通链接
普通链接带标题
直接链接:https://www.wjcms.net/
[锚点链接][maodian-id]
[maodian-id]: https://www.wjcms.net/
mailto:wjcms@qq.com
GFM a-tail link @wjcms
邮箱地址自动链接 wjcms@qq.com www@vip.qq.com

@wjcms

多语言代码高亮 Codes

行内代码 Inline code

  1. 执行命令:`npm install`

效果:
执行命令:npm install

缩进风格

即缩进四个空格,也做为实现类似 <pre> 预格式化文本 ( Preformatted Text ) 的功能。

  1. <?php
  2. echo "Hello world!";
  3. ?>

预格式化文本:

  1. | First Header | Second Header |
  2. | ------------- | ------------- |
  3. | Content Cell | Content Cell |
  4. | Content Cell | Content Cell |

JS代码

  1. function test() {
  2. console.log("Hello world!");
  3. }

HTML 代码 HTML codes

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <mate charest="utf-8" />
  5. <meta name="keywords" content="Editor.md, Markdown, Editor" />
  6. <title>Hello world!</title>
  7. <style type="text/css">
  8. body{font-size:14px;color:#444;font-family: "Microsoft Yahei", Tahoma, "Hiragino Sans GB", Arial;background:#fff;}
  9. ul{list-style: none;}
  10. img{border:none;vertical-align: middle;}
  11. </style>
  12. </head>
  13. <body>
  14. <h1 class="text-xxl">Hello world!</h1>
  15. <p class="text-green">Plain text</p>
  16. </body>
  17. </html>

图片

语法:

  1. ![图片alt](图片地址 ''图片title'')
  2. 图片alt就是显示在图片下面的文字,相当于对图片内容的解释。
  3. 图片title是图片的标题,当鼠标移到图片上时显示的内容。title可加可不加
  4. 示例:
  5. ![图片说明](https://img2020.cnblogs.com/other/1918908/202011/1918908-20201119170350478-457334512.png)

效果如下:
图片说明

列表

无序列表(减号)Unordered Lists (-)

  1. - 列表一
  2. - 列表二
  3. - 列表三

效果:

  • 列表一
  • 列表二
  • 列表三

无序列表(星号)Unordered Lists (*)

  1. * 列表一
  2. * 列表二
  3. * 列表三

效果:

  • 列表一
  • 列表二
  • 列表三

无序列表(加号和嵌套)Unordered Lists (+)

  1. + 列表一
  2. + 列表二
  3. + 列表二-1
  4. + 列表二-2
  5. + 列表二-3
  6. + 列表三
  7. * 列表一
  8. * 列表二
  9. * 列表三

效果:

  • 列表一
  • 列表二
    • 列表二-1
    • 列表二-2
    • 列表二-3
  • 列表三
    • 列表一
    • 列表二
    • 列表三

有序列表 Ordered Lists (-)

  1. 1. 第一行
  2. 2. 第二行
  3. 3. 第三行

效果:

  1. 第一行
  2. 第二行
  3. 第三行

GFM task list

  1. - [x] GFM task list 1
  2. - [x] GFM task list 2
  3. - [ ] GFM task list 3
  4. - [ ] GFM task list 3-1
  5. - [ ] GFM task list 3-2
  6. - [ ] GFM task list 3-3
  7. - [ ] GFM task list 4
  8. - [ ] GFM task list 4-1
  9. - [ ] GFM task list 4-2

效果:

  • [x] GFM task list 1
  • [x] GFM task list 2
  • [ ] GFM task list 3
    • [ ] GFM task list 3-1
    • [ ] GFM task list 3-2
    • [ ] GFM task list 3-3
  • [ ] GFM task list 4
    • [ ] GFM task list 4-1
    • [ ] GFM task list 4-2

绘制表格 Tables

语法:

  1. 表头|表头|表头
  2. ---|:--:|---:
  3. 内容|内容|内容
  4. 内容|内容|内容
  5. | 项目 | 价格 | 数量 |
  6. | -------- | -----: | :----: |
  7. | 计算机 | $1600 | 5 |
  8. | 手机 | $12 | 12 |
  9. | 管线 | $1 | 234 |

效果:

项目 价格 数量
计算机 $1600 5
手机 $12 12
管线 $1 234

特殊符号 HTML Entities Codes

  1. &copy; & &uml; &trade; &iexcl; &pound;
  2. &amp; &lt; &gt; &yen; &euro; &reg; &plusmn; &para; &sect; &brvbar; &macr; &laquo; &middot;
  3. X&sup2; Y&sup3; &frac34; &frac14; &times; &divide; &raquo;
  4. 18&ordm;C &quot; &apos;

效果:
? & ¨ ? ? £
& < > ¥ € ? ± ? § | ˉ ? ·

X2 Y3 ? ? × ÷ ?

18oC " '

绘制流程图 Flowchart

  1. st=>start: 用户登陆
  2. op=>operation: 登陆操作
  3. cond=>condition: 登陆成功 Yes or No?
  4. e=>end: 进入后台
  5. st->op->cond
  6. cond(yes)->e
  7. cond(no)->op

效果如下:

原文链接:http://www.cnblogs.com/wjcms/p/14006663.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号