MarkDown 编辑器学习

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


常用语法备忘

(一)标题

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

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

(二)列表

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

格式:

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

(三)图片

说明:对应于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码,比如表格里面加'|'可以用|表示;
  • 分割线: ***
  • 粗体:语句首尾加**,对应于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

最新文章

  1. 物联网平台设计心得:你所不知道的CRC校验
  2. JQuery简单标签页实现
  3. CocosCreator反射在Android中的使用
  4. c语言 指针与地址的区别
  5. Redis Sentinel高可用架构
  6. matlab将多条曲线绘制在一起
  7. CF 161D Distance in Tree 树形DP
  8. git deployment strategy
  9. 转载:STM32之中断与事件---中断与事件的区别
  10. Android手机APN设置(中国移动 联通3G 电信天翼),解决不能上网的问题
  11. Codecs是以plugin的形式被调用的(显示中文的codec plugin文件是qcncodecs4.dll),可静态载入和动态载入
  12. Gentoo安装详解(三)-- 配置系统
  13. Spring+SpringMVC+MyBatis深入学习及搭建(十七)——SpringMVC拦截器
  14. PowerManager和PowerManager.WakeLock详解
  15. H5直播避坑指南
  16. about this blog
  17. 使用GNVM工具高效切换node版本
  18. Selenium的自我总结1
  19. Quagga的安装和使用
  20. android 常见内存泄漏原因及解决办法

热门文章

  1. Vue知识分享一
  2. 二分+最小生成树【bzoj2654】: tree
  3. Python学习之路--1.0 Python概述及基本数据类型
  4. JavaScript小技巧随笔
  5. jeesite 框架的简单应用
  6. HIbernate | 简单对象嵌套实践
  7. react 中文文档案例四 (登陆登出按钮)
  8. List&lt;T&gt;中 GetRange (int index, int count)的使用
  9. linux防火墙添加端口
  10. 查看php 相关信息