MarkDown语法使用

引言

由于MarkDown的语法简洁明了、学习容易、格式不随编辑器而改变导出分享方便、书写错误易发现;并且,我们有了RStudio这样的神级编辑器,我们还可以快速将Markdown转化为演讲PPT、Word产品文档、LaTex论文甚至是用非常少量的代码完成最小可用原型等显著特点,越来越多的人使用MarkDown进行写作和记录

那么,我们来看一下,MarkDown的一些常用的语法:

一、标题

MarkDown中有 6 个标题
想要写标题,在标题文字的前面加 #
几级标题就加几个 #

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

效果如下:

我是一级标题

我是二级标题

我是三级标题

我是四级标题
我是五级标题
我是六级标题

二、字体

  • 加粗

在需要加粗的文字左右各加上两个 *

**加粗的文字**

效果如下:

我是需要加粗的文字

  • 斜体

在需要倾斜的文字左右各加上一个 *

*倾斜的文字*

效果如下:

我是需要倾斜的文字

  • 倾斜加粗

在需要倾斜加粗的文字左右各加三个 *

***倾斜加粗的文字***

效果如下:

我是需要倾斜加粗的文字

  • 删除线

在需要加粗的文字左右各加上两个 ~

~~加删除线的文字~~

效果如下:

我是需要加删除线的文字

三、引用

在引用的文字之前加 > ,引用是可以嵌套的,但是没神马卵用

> 我是被引用的内容
>> 我也是被引用的内容
>>>>>> 我还是被引用的内容

效果如下:

我是被引用的内容

我也是被引用的内容

我还是被引用的内容

四、分割线

不少于三个的 - 或者 *

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

效果如下:





五、插入图片

语法:

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

图片alt就是显示在图片下面的文字,相当于对图片内容的解释。
图片title是图片的标题,当鼠标移到图片上时显示的内容。title可加可不加

效果如下:

加微信好友

上传本地图片直接点击导航栏的图片标志,选择图片即可

六、超链接

语法

[超链接文字](链接到底地址  "超链接title")

效果如下:

Lamport的简书主页

七、列表

无序列表

用 + - * 都可以形成无序列表

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

效果如下:

  • 我是无序列表内容
  • 我是无序列表内容
  • 我是无序列表内容
有序列表

数字后边加一个点( . )就可以形成有序列表

1. 我是有序列表内容
2. 我是有序列表内容
3. 我是有序列表内容

效果如下:

  1. 我是有序列表内容
  2. 我是有序列表内容
  3. 我是有序列表内容
列表嵌套
上一级和下一级之间敲三个空格即可
+ 一级无序列表内容
   + 二级无序列表内容
   - 二级无序列表内容
   * 二级无序列表内容

效果如下:

  • 一级无序列表内容
    • 二级无序列表内容
    • 二级无序列表内容
    • 二级无序列表内容
### 八、表格
姓名武器排行
刘备玄德老大
关羽云长老二
张飞翼德老三
> + 第一行叫表头
> + 第二行分割表头和内容。
> + 冒号代表文字对齐方式
> + 文字默认左对齐
> + 冒号在前边代表左对齐
> + 左右都有冒号代表居中对齐
> + 冒号在后边代表右对齐

**效果如下:**
|姓名|字|武器|排行|
|---|:---|:--:|---:|
|刘备|玄德|剑|老大|
|关羽|云长|刀|老二|
|张飞|翼德|矛|老三|
### 九、代码块
#### 1、单行代码
代码内容左右分别加一个反引号( ` )

代码内容
代码内容

**效果如下:**
> `代码内容`
> `
> 代码内容
> `

> **注:**单行代码的反引号( ` )既可以和内容写在同一行,也可以单独占一行
#### 2、多行代码块
代码内容左右分别加三个反引号( ` )

···
代码块内容
···
···代码块内容···

**效果如下:**
> ```
> 代码块内容
> ```
> ```代码块内容```

> **注:**多行代码块的反引号( ` )只可以单独占一行,不可以和内容写在同一行,否则会解析为单行代码块
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WangEditor是一款基于JavaScript的富文本编辑器,支持使用Markdown语法进行编辑。下面是使用WangEditor编辑器进行Markdown语法的步骤: 1. 引入WangEditor的相关文件:在HTML文件中引入WangEditor的CSS和JS文件,可以通过CDN或者下载到本地引入。 2. 创建编辑器实例:在HTML文件中创建一个div容器,用于显示编辑器,然后通过JavaScript代码创建一个WangEditor实例,并将其绑定到该div容器上。 3. 配置编辑器:可以通过配置项来设置编辑器的样式、工具栏按钮等。在配置项中,可以设置编辑器的模式为Markdown模式。 4. 获取Markdown内容:通过调用编辑器实例的getContent方法,可以获取编辑器中输入的Markdown内容。 5. 渲染Markdown内容:将获取到的Markdown内容进行渲染,可以使用第三方的Markdown解析库,如marked.js或者markdown-it等。 下面是一个简单的示例代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>WangEditor Markdown示例</title> <link rel="stylesheet" type="text/css" href="path/to/wangeditor.css"> </head> <body> <div id="editor"></div> <script type="text/javascript" src="path/to/wangeditor.js"></script> <script type="text/javascript"> var editor = new wangEditor('#editor'); editor.config.menus = [ 'head', // 标题 'bold', // 粗体 'italic', // 斜体 'underline', // 下划线 'quote', // 引用 'list', // 列表 'link', // 链接 'table', // 表格 'code', // 代码块 'undo', // 撤销 'redo' // 重复 ]; editor.config.mode = 'markdown'; editor.create(); function getMarkdownContent() { var content = editor.txt.html(); // 将content进行Markdown解析和渲染 // ... } </script> </body> </html> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值