MakeDown编辑器怎么使用

亦凉 2023-10-09 14:01 74阅读 0赞

**目录**

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代码

网页效果

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6YOd6ICB5LiJ_size_12_color_FFFFFF_t_70_g_se_x_16][]

### 2 代码格式化 ###

#### 2.1 行内代码 ####

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

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

对应的HTML

我们可以使用<code><br></code>换行，也可以使用<code><p></p></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>

![4423a507e338427696e0047740cdc422.png][]

#### 3.2 有序列表 ####

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

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

html

![dd04d389946d42f9be206f32563aef03.png][]

#### 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>

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6YOd6ICB5LiJ_size_6_color_FFFFFF_t_70_g_se_x_16][]

### 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>,获取更多信息。

显示在网页上结果为：  
请大家访问我的[博客][Link 1],获取更多信息。

### 5 转义 ###

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

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

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6YOd6ICB5LiJ_size_12_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/75ccb44b63f2464284cdf6a3399915b2.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6YOd6ICB5LiJ,size_12,color_FFFFFF,t_70,g_se,x_16
[4423a507e338427696e0047740cdc422.png]: https://img-blog.csdnimg.cn/4423a507e338427696e0047740cdc422.png
[dd04d389946d42f9be206f32563aef03.png]: https://img-blog.csdnimg.cn/dd04d389946d42f9be206f32563aef03.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6YOd6ICB5LiJ_size_6_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/fcb68b81698147a2a7c39fe0f78bcfa2.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6YOd6ICB5LiJ,size_6,color_FFFFFF,t_70,g_se,x_16
[Link 1]: http://blog.csdn.net/whqet