📘
技术积累
  • 简介
  • 学习方法
    • 如何提高编程技能
  • 基础知识
    • Linux
      • Linux常用指令
      • rsync
      • VIM
      • tmate命令行分享
      • 命令别名存储
      • 项目服务器重启
    • 设计模式
    • 自动化接口使用
    • 项目经理培训
    • 报价策略
    • 培训材料撰写
  • 工具
    • Ajax
    • AutV
    • axios
    • Babel
    • bower
    • codecov
    • crypto
    • CSS3D
    • Docker
    • Echarts
    • Git
      • 如何删除项目
      • 多个ssh_key的生成与使用
      • 常用命令清单
    • Gitbook
      • Gitbook 更多配置
      • Markdown 标记示例
    • gulp
    • Istanbul
    • JEST
    • jMeter
    • js-md5
    • Kama
    • LESS Sass 编译工具Koala介绍
    • Lodash
    • Markdown
    • Maven
    • Moment
    • Nginx
    • NPM
    • NVM
    • particles.js粒子效果
    • PM2
    • Qs
    • Swagger
    • Webpack
    • Webpack
    • Yarn
    • Yeoman使用
  • 平台
    • 代码托管平台 GitLab
    • 代码安全平台 sonarqube
  • 语言和框架
    • 工作流
    • Angular
      • FUSE-Angular前端框架项目初始化
      • AngularJs-toaster-Angular提示弹框插件
      • ng-file-upload-Angular上传图片插件
      • ngclipboard-Angular复制到剪贴板插件
    • Vue
      • ElementUI-Vue前端框架项目初始化
      • clipboard使用
      • mobileSelect.js使用
      • vue-cookies使用
      • vue-fullpage使用
      • vue-router使用
      • Vue的Ref属性
      • Vuex使用
      • Vux使用
      • vux-uploader使用
      • Vue生命周期图例
      • iview-loader使用
    • cycleJs
    • ES6
      • async/await
    • react
      • react生命周期
      • create-react-app
      • Rematch
      • react-router
      • react-router-dom
      • css-in-js
    • TypeScript
      • VueAndTypeScript
    • 微信小程序
    • Hexo博客框架
      • Hexo博客框架-图片问题处理
      • Hexo博客框架-切换主题
    • SmartClient
    • HybridApp混合开发
      • uniapp
  • 代码审查
    • 代码命名规范
    • 页面代码结构
    • JavaScript标准编码风格
    • AirbnbJavaScript风格指南
  • 其他
    • 收藏|激发灵感的33套网页配色方案(附色值)
    • KPI&OKR
    • 测试自动化
    • view
    • 前端面试
      • 项目方面
      • html+css
      • JavaScript方面
      • JavaScript面试
      • 框架方面
      • 前端面试3+1
        • 20190420
        • 20190419
        • 20190418
        • 20190417
    • Linux面试题
    • JAVA面试
    • 测试面试
    • 钉钉使用
    • sd360
  • 前端知识积累
    • css3单位汇总
    • CSS解决loading效果
    • 深度克隆的方法
    • 加密技术
    • 解决ios下的微信页面背景音乐无法自动播放问题
    • 一套绝佳的图标字体库和CSS框架:Font Awesome
    • 关于ico图标不显示解决办法
    • 提升页面响应速度
    • innerHTML引入的script如何使用
    • JavaMap转Json
    • JS开发工具大全
    • 移动端插件
    • 移动端页面通过前端方法禁止ios页面横屏方法
    • 图片资源网站
    • 排序方式
    • 图片预览上传
    • Windows部署时脚本报错
Powered by GitBook
On this page
  • Markdown基础语法总结
  • 目录
  • 一、标题
  • This is an H1
  • This is an H2
  • This is an H1
  • This is an H2
  • 二、列表
  • 三、引用
  • 四、代码区块
  • 五、分隔线
  • 六、段落和换行
  • 七、链接
  • 八、强调
  • 九、代码
  • 十、图片 Markdown使用一种和链接很相似的语法来标记图片 允许两种样式:行内式和参考式
  • 十一、转义

Was this helpful?

  1. 工具
  2. Gitbook

Markdown 标记示例

Markdown基础语法总结

目录

  • 区块元素

    • 标题

    • 列表

    • 区块引用

    • 代码区块

    • 分隔线

    • 段落和换行

  • 区段元素

    • 链接

    • 强调

    • 代码

    • 图片

    • 转义

一、标题

  • 类Setext

This is an H1

This is an H2

  Code:

  This is an H1   
  ====

  This is an H2
  ----
备注:任何数量的=和-都可以有效果<br/>
=表示最高阶标题,-表示第二阶标题
  • atx形式

This is an H1

This is an H2

This is an H3

This is an H4

This is an H5

This is an H6

  Code:

  # This is an H1

  ## This is an H2

  ### This is an H3

  #### This is an H4

  ##### This is an H5

  ###### This is an H6
也可以表示成这样 # This is an H1 #
备注: 行首n个#表示n阶标题,n最大为6

二、列表

  • 有序列表

有序列表使用数字接着一个英文句点

  1. Bird

  2. McHale

 Code:

 1. Bird
 2. McHale

无序列表

无序列表是使用,+,-中任意一种来表示

  • Red

  • Green

  • Blue

  Code:
  - Red
  + Green
  * Blue

三、引用

区块引用是使用类似email中用>来表示

示例

 > 简单引用1
 > 简单引用2
 > 
 > 多行引用
 >> 嵌套引用

 > ## 引用中使用Markdown语法。
 > 
 > 1.   这是第一行列表项。
 > 2.   这是第二行列表项。
 > 
 > 给出一些例子代码:
 > 
 >     return shell_exec("echo $input | $markdown_script");

效果

简单引用1 简单引用2

多行引用

嵌套引用

引用中使用Markdown语法。

  1. 这是第一行列表项。

  2. 这是第二行列表项。

给出一些例子代码:

return shell_exec("echo $input | $markdown_script");

四、代码区块

建立代码区块,只需要简单地缩进4个空格或是1个制表符就可以

代码块一直持续到没有缩进的那一行(或是文件的结尾)

代码块

也可以使用` 来表示

使用缩进表示代码块

五、分隔线

一行中用三个以上的星号、减号、底线来建立一个分隔线,行内不能有其他东西, 也可以在星号或是减号中间插入空格

---
- - -
***
 * * *
 ——————————————

——————————————

六、段落和换行

  • 段落

段落是由一个或多个连续的文本行组成,

它的前后要一个以上的空行(显示上看起来像是空的)

  • 换行

Mardown允许段落内的强迫换行(插入换行符) 要依赖Markdown来插入<br/>标签的话,在<br/>插入处要先按入两个以上的空格然后回车

七、链接

支持两种形式的连接语法: 行内式和参考式 链接字符不区分大小写

  • 行内式

Code:
This is [baidu](http://www.baidu.com/ "度娘")

[baidu](https://www.baidu.com/)
  • 参考式

Code:
This is [baidu example][id] reference-style link.
标记: [id]: https://www.baidu.com/ "度娘"
或者: [id]: https://www.baidu.com/ '度娘' 
或者 [id]: https://www.baidu.com/ (度娘)
  • 隐式链接标记功能

Code:
[Baidu][]
标记可以这样写: [Baidu]: http://baidu.com
  • 参考式链接范例:

--I get 10 times more traffic from [Google] [1] than from 
--[Yahoo] [2] or [MSN] [3]. 
--[1]:  http://google.com/        "Google"
--[2]: http://search.yahoo.com/  "Yahoo Search"
--[3]: http://search.msn.com/    "MSN Search"
--I get 10 times more traffic from [Google][] than from
--[Yahoo][] or [MSN][].
--[google]: http://google.com/        "Google"
--[yahoo]:  http://search.yahoo.com/  "Yahoo Search"
--[msn]:    http://search.msn.com/    "MSN Search"
(备注: 上述代码在使用时需删掉前面的--)
  • 自动链接

示例如下: 

http://www.baidu.com

八、强调

Markdown使用性星号()和底线(_)作为标记强调字词的符号 两端被一个或包围的单词会被转换成斜体 两端被两个*或包围的单词会被转换成粗体 *或_的两端不能有空白 用什么符号就以什么符号结尾

示例
 *斜体*
 _斜体_
 **粗体**
 __粗体__

九、代码

如果要标记一段行内代码,可以用反引号 ` 把它包起来 用多个反引号来开启和结束代码区段

段落代码 包含`反引号 包含 `两个反引号` <特殊符号&>

 示例:

 ``段落代码``  
 ``包含`反引号``
 ``包含 `两个反引号` `` 
 ``<特殊符号&>``

十、图片 Markdown使用一种和链接很相似的语法来标记图片 允许两种样式:行内式和参考式

  • 行内式的图片语法:

示例
![September](http://a3.topitme.com/4/9b/8f/11644743891028f9b4o.jpg)  
![雨夜](http://imgsrc.baidu.com/image/c0%3Dshijue1%2C0%2C0%2C294%2C40/sign=624edb750633874488c8273f3966b38c/eaf81a4c510fd9f94340d04c2f2dd42a2834a444.jpg "视觉中国")
  • 参考式语法:

示例:
--![雨夜][xd]  
--[xd]:http://imgsrc.baidu.com/image/c0%3Dshijue1%2C0%2C0%2C294%2C40/sign=624edb750633874488c8273f3966b38c/eaf81a4c510fd9f94340d04c2f2dd42a2834a444.jpg "视觉中国"
(备注: 上述代码在使用时需删掉前面的--)

十一、转义

使用反斜杠来插入一些在语法中有其它意义的符号,如* 需要转义的字符:

\   反斜线
`   反引号
*   星号
_   底线
{}  花括号
[]  方括号
()  括弧
#   井字号
+   加号
-   减号
.   英文句点
!   惊叹号
PreviousGitbook 更多配置Nextgulp

Last updated 4 years ago

Was this helpful?

This is

This is reference-style link.

[Baidu][] 标记可以这样写: [Baidu]:

示例

视觉中国
baidu
baidu
baidu example
http://baidu.com
https://www.baidu.com
September
视觉中国