MarkDown 编辑器学习

MarkDown 编辑器学习

是一种简单快键的文字排版工具,可以用于编写说明文档,鉴于其语法简洁明了,且其渲染生成的样式简单美观,很多开发者也用它来写博客,已被国内外很多流行博客平台所支持。生成的文件后缀名为.MD,亦可以导出生成HTML或PDF文件。


常用语法备忘

(一)标题

说明:在段落首用#申明标题,根据#数区别标题级别,Markdown一共有6级标题,对应于HTML中的<h1>-<h6>标签,不同级别的标题除了大小区别外,样式也存在差异。

格式:#表示一级标题,##表示二级标题,以此类推;什么也不标注即表示以正文格式输入。

TitleExample

(二)列表

说明:分为无序列表和有序列表,分别对应于HTML中的<ul><ol>标签

格式:

无序列表: * listName // 星号+空格+名字,也可以用+,-代替*,效果一样
有序列表: 1. listName // 数字+英文点+空格+名字

ListExample

(三)图片

说明:对应于HTML中的<image>标签,可添加本地图片或网络图片。如果是需要分享到网上的文章,图像最好要先上传到网上,如github。MarkDown也自带上传图像到网络的功能,操作为:a).点击图标或快捷键“Ctrl+G”; b).在弹出框中按"浏览并上传"按钮上传指定图像。

注意:网盘链接不行,因为网盘分享的并非图像路径。

格式:有两种格式:行内格式、参考格式;

  1. 行内格式:图片地址直接跟在图片文字后面。
    ![alt text](/path/to/img.jpg "Title")

    其生成的HTML为:<img src="/path/to/img.jpg" alt="alt text" title="Title" /> ,alt表示图像生成失败时的替换文本。

  2. 参考格式:在引用处只为图片地址申明一个名称,然后在文件其他地方定义图片地址内容,地址名称可以由字母、数字、空格组成,不区分大小;

     这是一副图像![alt text][1]
     [1]: /path/to/img.jpg "Title"
    

(四)链接

格式:对应于HTML中<a>标签,有三种格式:行内格式、参考格式、自动链接格式;

  1. 行内格式

    这是一个链接[example link](http://example.com/ "With a Title").

    其生成的HTML为:<p>这是一个链接<a href="http://example.com/" title="With a Title">example link</a>.</p>

  2. 参考格式

     这是链接一[example link1][1],这是链接二[example link1][2];
     [1]: http://google.com/ "Google"
     [2]: http://search.yahoo.com/ "Yahoo Search"
    
  3. 自动链接格式:对于链接文字和链接内容一致的网址或是电子邮箱链接,可以以较为简短的自动链接格式标注,即直接用方括号将链接起来;

    这是百度网址:<http://www.baidu.com>

(五)代码

格式:有三种格式:行内代码、代码块,指定语言代码块;指定语言代码块中的代码将以指定语言标记风格进行标记展示。

  1. 行内代码:在代码首尾尾加`符号;

     This is a code `int i = 0`;
    
  2. 代码块:代码段向右缩进4个空格或是一个tab;

     This is a code segment
    
     	int i = 0;
     	i = i + 1;
    
  3. 指定语言代码块:代码块首 + ```html(或js,java...); 代码块尾 + ```;(以下代码在markdown上无法渲染,但是在博客园里能正常显示,谁知道是为什么啊?)

     ```html
     <p> woshishui <p>
     <p> woshinia <p>
     ```
    

(六)其他

  • 转义符号: Markdown中的转义符号为'\',可转义的字符包括:*,#,\,`,_,{},[],(),+,-,.,!;也可以用ASCII码,比如表格里面加'|'可以用&#124;表示;
  • 分割线: ***
  • 粗体:语句首尾加**,对应于HTML语言的<em>标签;
  • 斜体:语句首尾加*,对应于HTML语言的<strong>标签;
  • 缩进:$emsp表示空格;

常用快捷键备忘

  • 加粗 Ctrl + B
  • 斜体 Ctrl + I
  • 引用 Ctrl + Q
  • 插入链接 Ctrl + L
  • 插入代码 Ctrl + K
  • 插入图片 Ctrl + G

衍生阅读:

[1] 数学公式对应的markdown代码

参考链接

[1] Markdown 语法说明

[2] markdown学习笔记

[3] MarkDown 的基本语法和快捷键,20分钟快速学会

[4] 前端学Markdown

posted on 2017-12-07 11:55  AmmyXu  阅读(243)  评论(0编辑  收藏  举报