markdwon常用语法

Symbol卢
• 阅读 1289

什么是markdwon?

Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档。

Markdown 语言在 2004 由约翰·格鲁伯(英语:John Gruber)创建。

Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。

Markdown 编写的文档后缀为 .md, .markdown。

Markdown 应用

Markdown 能被使用来撰写电子书,如:Gitbook。 当前许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息。例如:GitHub、简书、reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge等。

语法

标题

在想要设置为标题的文字前面加 # 来表示 标题和html的标题类似,一共有6个标题

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

他们用markdwon的语法为:

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题 

字体

  • 加粗

要加粗的文字左右分别用两个*号包起来

  • 斜体

要倾斜的文字左右分别用一个*号包起来

  • 斜体加粗

要倾斜和加粗的文字左右分别用三个*号包起来

  • 删除线

要加删除线的文字左右分别用两个~~号包起来 示例:

**加粗的文字**
*倾斜的文字*`
***斜体加粗的文字***
~~加删除线的文字~~ 

效果:

加粗的文字

_倾斜的文字_`

斜体加粗的文字

加删除线的文字

分割线

用三个或者三个以上的 - 或者 *

示例:

---
----
***
***** 

效果:





列表

有序列表

语法: 用 - + * 任何一种都可以,符号跟内容之间要有空格。 示例:

- 无序列表内容
+ 无序列表内容
* 无序列表内容 

效果:

  • 无序列表内容

  • 无序列表内容

  • 无序列表内容

无序列表

语法: 数字加点 序号跟内容之间要有空格 示例:

1. 列表1的内容
2. 列表2的内容
3. 列表3的内容 

效果:

  1. 列表1的内容
  2. 列表2的内容
  3. 列表3的内容

列表嵌套

语法: 和html嵌套类似,这里 上一级和下一级之间三个空格即可

文字引用

语法:在引用的文字前加 >;引用也可以嵌套 示例:

>引用的内容
>>引用的内容2
>>>这是引用的内容3
//这里的>可以有n个一直的嵌套下去 

效果:

引用的内容

引用的内容2

这是引用的内容3

超链接

语法:

[超链接名的名称](超链接的地址 "超链接的title")

title就是鼠标移动到超链接上面的提示的内容,可加可不加 

示例:

[程序思维](http://www.lucklnk.com "前端干货多多")

[DataV](http://datav.jiaminghi.com/ "Vue炫酷大屏数据展示组件库") 

效果:

程序思维

DataV

图片

语法:

![图片的alt](图片的地址 "图片的title")

//图片的alt:就是显示在图片下面的文字,对图片内容的进行解释。
//图片的title:就是是图片的标题,当鼠移动到图片上时显示的内容,title可加可不加,和上面超链接的用法一样
// 

示例:

![DataV组件库的Demo](https://img-hello-world.oss-cn-beijing.aliyuncs.com/a67c3cc1192cea50ceb6155a6ec01247.jpeg) 

效果: markdwon常用语法

图片设置宽和高

以上方的形式设置的宽度和高度图片的宽和高是不受限制的 ,给生成的图片限制宽度和高度,可以使用 img 标签

写法如下:

<img src='https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e273ac8ed0e94498a24c80734213d1a2~tplv-k3u1fbpfcp-zoom-1.image' width=300px height=200px />

// 写法二,自动缩放
<img src='https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6974134e0e5840dab98ac9999e1cb57d~tplv-k3u1fbpfcp-zoom-1.image' width=40%/> 
```![](https://img-hello-world.oss-cn-beijing.aliyuncs.com/46de9453d7afa95ce5c56016ebc50b8f.jpeg)

`![]()` 转化成 html 后就会变成 `img` 标签,所以直接在 Markdown 中写 `img` 标签并且加上宽高就可以实现设置图片的宽和高。

// 原始 markdown 语法 markdwon常用语法

// 转化成 html 后语法 markdwon常用语法


表格
--

语法:
表头 表头 表头
内容 内容 内容
内容 内容 内容
// 第二行用于分割表头和内容。
// - 有一个即可,通常为了对齐,可以多加几个
对齐方式:
文字默认居左
两边加:表示文字居中
左边加:表示文字居右
```

示例:

|商品名称|商品数量|商品单价|
|---|:---:|---:|
|手机|1|1580元|
|笔记本|3|5800元| 

效果:

商品名称 商品数量 商品单价
手机 1 1580元
笔记本 3 5800元

代码

单行代码

语法: 代码之间分别用一个反引号包裹 示例:

`单行代码的内容` 

效果: 单行代码的内容

多行代码(代码块)

语法: 代码前后分别用三个反引号包起来,并且两边的反引号单独要占一行 示例:

[```]
  module.exports = function() {
    let hello = document.createElement('div');
    hello.innerHTML = "欢迎大家来到程序思维学习";
    return hello;
  };
[```]

注:上面的[]是为了转义加上去的,用于演示 

效果:

 module.exports = function() {
    let hello = document.createElement('div');
    hello.innerHTML = "欢迎大家来到程序思维学习";
    return hello;
  }; 

代码的diff

语法:和多行代码块类似 ,参考下方的示例; diff 通常用来做diam的增删的对比效果

示例:

​```diff
// 数组去重
const unique = (arr)=>{
-  return Array.from(new Set(arr))
+  return [...new Set(arr)]
}
​``` 

效果:

// 数组去重
const unique = (arr)=>{
-  return Array.from(new Set(arr))
+  return [...new Set(arr)]
} 

折叠 效果

直接使用 <details><summary> 标签

点我查看隐藏的内容我是隐藏的内容```

点我查看隐藏的内容我是隐藏的内容
```

工具推荐

大家可以到 Typroa 的官网去下载,文章末尾送上设置主题的传送门

markdwon常用语法

Typora 设置主题传送门

点赞
收藏
评论区
推荐文章
艾木酱 艾木酱
5个月前
快速入门|使用MemFire Cloud构建React Native应用程序
MemFireCloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
Stella981 Stella981
1年前
Markdown语法你都会了吗?
!(https://oscimg.oschina.net/oscnet/9ddbe5f87d1c9eb99e96d3dd387c8e7180b.jpg)关于Markdown,它可以说是程序员公认最好的文档语言了,没有之一!我相信经常写文章或者开发文档的大佬们都对其能生成简洁、大方、雅观的文档都深有体会,它的强大是毋庸置疑的。它编写的文档不但能生成
Wesley13 Wesley13
1年前
VS Code实现markdown画流程图
安装最新的vscode编辑器,原生支持markdown语法。不会markdow的人可以去好好学下,写文档神器!!!1、安装MarkdownPreviewEnhanced插件!(https://oscimg.oschina.net/oscnet/51c00974c0d771d52c9c93fcd2cf701b400.png)2、本地新建
Stella981 Stella981
1年前
Markdown语法讲解及MWeb使用教程
写了一个月的博客,忽然感觉Markdown编辑器比较好用,于是就下载了一个本地的Markdown编辑软件学习了一下,刚好软件里自带了一篇英文的指示文档,顺便翻译了一下,通过这个过程也大致熟悉了Markdown语法,以后都会用Markdown来写文章了。通过Markdown编辑器发布了几篇博客,发现以下几个标签比较常用:标题标签
Stella981 Stella981
1年前
Aspose.Words for Java应用之一,word转png怎么去掉水印?为什么要收费?
    Aspose.Words是一款先进的文档处理控件,在不使用MicrosoftWords的情况下,它可以使用户在各个应用程序中执行各种文档处理任务,其中包括文档的生成、修改、渲染、打印,文档格式转换和邮件合并等文档处理。此外,Aspose.Words支持DOC,OOXML,RTF,HTML,OpenDocument,PDF,XPS,EPUB和
Stella981 Stella981
1年前
Markdown语法
Markdown基本语法\TOC\优点:1、因为是纯文本,所以只要支持Markdown的地方都能获得一样的编辑效果,可以让作者摆脱排版的困扰,专心写作。2、操作简单。比如:word编辑时标记个标题,先选中内容,再点击导航栏的标题按钮,选择几级标题。要三个步骤。而Markdown只需要在标题内容前加即可缺点:1、需要记一
Stella981 Stella981
1年前
Markdown
MarkdownMarkdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式。现在所写的语法就是Markdown语法目录语法结构(语法结构)表格(表格)图片插入(图片插入)工具(工具)
不才 不才
1年前
md-loader
mdloader组件文档是如何渲染出来文档用于描述系统功能,而组件文档描述组件的功能,对于前端组件为了直观体现一般会有一个预览模块,而一般组件文档都是采用markdown编写,而md是文本内容且并没有渲染组件代码的能力,那么这是如何做的呢?简单的说就是“自定义结构”,像elementui中对代码的描述为,中间的YOUCODE可以放简单的vue组件代码。这种
Stella981 Stella981
1年前
Markdown 写文档做笔记的利器
文章目录1常用编辑器(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fblog.csdn.net%2Fchenlixiao007%2Farticle%2Fdetails%2F108159014%231__5)2基本用法(https://www.osc
helloworld_28799839 helloworld_28799839
5个月前
常用知识整理
Javascript判断对象是否为空jsObject.keys(myObject).length0经常使用的三元运算我们经常遇到处理表格列状态字段如status的时候可以用到vue