MakeDown编辑器怎么使用

简介: MakeDown编辑器怎么使用

目录

1.文本格式化

1.1 强调文字

1.2 添加删除线

        1.3 标题
2 代码格式化

2.1 行内代码

2.2 区块代码

3. 列表

3.1 无序列表

3.2 有序列表
3.3 列表嵌套

4 链接

4.1 行内式链接

4.2 参考式链接

5 转义

1.文本格式化

1.1 强调文字

我们使用*斜体文字*的方式倾斜文字,**加粗的文字**的方式加粗文字,使用***加粗的斜体字***同时加粗和倾斜文字。

下面的Markdown代码:

*斜体文字*
**加粗文字**
***加粗的斜体文字***

对应的HTML代码

<em>斜体文字</em>
<strong>加粗文字</strong>
<strong><em>加粗的斜体文字</em></strong>

网页上显示:

       斜体文字

       加粗文字

       加粗的斜体文字

1.2 添加删除线

我们可以使用markdown给文字添加删除线:

~~添加删除线的文字~~

编译成html之后:

<del>添加删除线的文字</del>

显示在网页上结果为:

添加删除线的文字

1.3 标题

Markdown 支持两种标题的语法,类 Setext 和类 atx 形式。

类Setext形式采用底线的形式.

类Setext形式采用底线的形式.
一号标题
=============
二号标题
-------------
类Atx形式则是在行首插入1到6个#,对应到标题1到标题6.
# 一号标题
## 二号标题
### 三号标题
#### 四号标题
##### 五号标题
###### 六号标题

对应HTML代码

<h1>一号标题</h1>
<h2>二号标题</h2>
<h3>三号标题</h3>
<h4>四号标题</h4>
<h5>五号标题</h5>
<h6>六号标题</h6>

网页效果

2 代码格式化

2.1 行内代码

使用反引号”`”包含实现行内代码。

我们可以使用`<br>`换行,也可以使用`<p></p>`实现。
`高亮`文字

对应的HTML

我们可以使用<code>&lt;br&gt;</code>换行,也可以使用<code>&lt;p&gt;&lt;/p&gt;</code>实现。
<code>高亮</code>文字。

2.2 区块代码

如果需要在代码内插入反引号,需要多个反引号开始和结束一段代码。

如果需要代码块和语法高亮,可以采用三个反引号的方式,同时可以注明语言类型。

 ```ruby
 require 'redcarpet'
 markdown = Redcarpet.new("Hello World!")
 puts markdown.to_html
 ```

3. 列表

3.1 无序列表

无序列表使用星号、加号或是减号作为列表标记,如果不按列表显示,前面记得加一空行。

- Red
- Green
- Blue

对应html

<ul>
    <li>Red</li>
    <li>Green</li>
    <li>Blue</li>
</ul>

3.2 有序列表

使用数字接着一个英文句点表示一个有序列表, 注意前面的数字对列表没有影响。

1. 文字
2. 图片
4. 表格

html

<ol>
    <li>文字</li>
    <li>图片</li>
    <li>表格</li>
</ol>

3.3 列表嵌套

列表可以嵌套,添加tab缩进表示层次。例如下面的Markdown代码:

1. 文字
    1. 强调
        - 粗体
        - 斜体
        - 粗体和斜体
    2. 引用
2. 图片
3. 表格

  对应的html代码

<ol>
    <li>文字
    <ol>
        <li>强调
            <ul>
                <li>粗体</li>
                <li>斜体</li>
                <li>粗体和斜体</li>
            </ul>
        </li>
        <li>引用</li>
    </ol>
    </li>
    <li>图片</li>
    <li>表格</li>
</ol>

4 链接

Markdown 支持两种形式的链接语法: 行内式和参考式两种形式。

4.1 行内式链接

首先来看行内式,只要在方块括号后面紧接着圆括号并插入网址链接即可,如果你还想要加上链接的 title 文字,只要在网址后面,用双引号把 title 文字包起来即可。

欢迎大家访问我的[博客](http://blog.csdn.net/whqet/ "博客")。
也可以不指定[链接](http://blog.csdn.net)的title。

对应html代码

欢迎大家访问我的<a href="http://blog.csdn.net/whqet/" title="博客">博客</a>。
也可以不指定<a href="http://blog.csdn.net">链接</a>的title。

4.2 参考式链接

参考式链接需要进行链接内容定义,然后引用该定义设置链接。

链接内容定义格式为:

[链接名]: 链接地址 "链接title"
[链接名]: 空格(或tab) 链接地址 空格 "链接地址"(可省略)

对应html代码

请大家访问我的<a href="http://blog.csdn.net/whqet" title="我的CSDN博客">博客</a>,获取更多信息。

显示在网页上结果为:

请大家访问我的博客,获取更多信息。


5 转义

Markdown 可以利用反斜杠来实现转义, 支持以下这些符号前面加上反斜杠来帮助插入普通的符号:


\   反斜线

`   反引号

*   星号

_   底线

{}  花括号

[]  方括号

()  括弧

#   井字号

+   加号

-   减号

.   英文句点

!   惊叹号

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


目录
相关文章
|
10天前
VScode用户自定义代码片段
VScode用户自定义代码片段
13 0
|
8月前
|
JavaScript Windows
如何使用vscode用户代码
1.使用vscdoe 设置->首选项->用户片段-vue.json 设置常用的代码片段。注意⚠️ 想要在vue script 标签内生效,需要设置在javascritp.json 文件中。 2 是光标出现的位置,使用tab键可以快速切换,填充代码/文案。
47 0
|
5月前
|
Java
【学习记录】IDEA编辑器 - 类、方法模板配置
【学习记录】IDEA编辑器 - 类、方法模板配置
47 0
【学习记录】IDEA编辑器 - 类、方法模板配置
|
6月前
|
小程序 前端开发 JavaScript
小程序组件库ColorUI的使用,一键复制粘贴
小程序组件库ColorUI的使用,一键复制粘贴
103 0
|
9月前
VSCode快捷开发必备配置——配置用户代码片段
VSCode快捷开发必备配置——配置用户代码片段
104 0
几步教你vscode创建代码模板快捷输入
几步教你vscode创建代码模板快捷输入
280 0
几步教你vscode创建代码模板快捷输入
vscode自定义代码模板方法
vscode自定义代码模板方法
198 0
vscode自定义代码模板方法
|
Java
编写Java程序,使用菜单组件制作一个记事本编辑器
编写Java程序,使用菜单组件制作一个记事本编辑器
214 0
编写Java程序,使用菜单组件制作一个记事本编辑器
“想玩点花式?” 试试快捷键操作编辑器吧(Unity3D)
在使用Unity中可能需要使用快捷键执行一些操作,或者修改Unity自带的快捷键,接下来就看一下,如何设置自定义快捷键吧
|
JavaScript
vscode编辑器怎么用代码片段生成用户的文件模板?
vscode编辑器怎么用代码片段生成用户的文件模板?
vscode编辑器怎么用代码片段生成用户的文件模板?