CSDN Markdown简明教程2-基本使用

桃扇骨 2022-08-07 05:41 164阅读 0赞

![简明教程2-Markdown基本使用][2-Markdown]

*  前言
 *  基本语法
    
     *  1文本格式化
        
         *  11 强调文字
         *  12 添加删除线
         *  13 标题
         *  14 引用
     *  2 代码格式化
        
         *  21 行内代码
         *  21 区块代码
     *  3 列表
        
         *  31 无序列表
         *  32 有序列表
         *  33 列表嵌套
         *  34 多段列表
     *  4 链接
        
         *  41 行内式链接
         *  42 参考式链接
         *  43 页内导航
     *  5 图片
     *  6 分割线
     *  7 转义
 *  动手实践
 *  声明

# 1.前言 #

Markdown是一种轻量级的标记语言，把作者从繁杂的排版工作中解放出来，实现**易读易写**的文章写作，已经逐渐成为事实上的行业标准。CSDN博客支持Markdown可以让广大博友更加专注于博客内容，大赞。但是，不少博友可能对Markdown比较生疏，本博接下来用一个系列文章《Markdown简明教程》扼要介绍Markdown，希望可以对大家有所帮助。

系列教程目录

*  关于Markdown
 *  **Markdown基本使用**
 *  Markdown表格和公式
 *  Markdown UML绘图
 *  CSDN Markdown快速上手
 *  Markdown 参考手册

本文为《Markdown简明教程》系列教程的第2篇Markdown基本使用，学习Markdown的基本语法，了解格式化文本，格式化代码、列表、图片、链接、转义符等，下一篇文章我们来研读Markdown的扩展使用。

# 2.基本语法 #

## 2.1文本格式化 ##

### 2.1.1 强调文字 ###

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

下面的Markdown代码：

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

将会编译成html：

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

显示在网页上的结果为：  
*斜体文字*  
**加粗文字**  
***加粗的斜体文字***

### 2.1.2 添加删除线 ###

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

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

编译成html之后：

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

显示在网页上结果为：  
添加删除线的文字

### 2.1.3 标题 ###

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

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

解析成html：

显示在网页上结果为：  
![标题结果][20150315122728424]

### 2.1.4 引用 ###

Markdown通过在引用的文字之前添加”>”标记达到引用的效果，引用段落的时候可以偷懒只在整个段落的第一行最前面加上 >。引用里面可以使用强调、链接等其他语法。

> 这里是一段引用
    > 也可以偷懒只在首行引用一个段落
    
    > 引用段落：Markdown是一种轻量级的标记语言，把作者从繁杂的排版工作中解放出
      来，实现**易读易写**的文章写作，已经逐渐成为事实上的行业标准。
    
    >**结束引用，用个空行**

编译成html之后：

<blockquote>
        <p>这里是一段引用
        也可以偷懒只在首行引用一个段落</p>
        <p>引用段落：Markdown是一种轻量级的标记语言，把作者从繁杂的排版工作中解放出来，实现<strong>易读易写</strong>的文章写作，已经逐渐成为事实上的行业标准。</p>
        <strong>结束引用，用个空行</strong>
    </blockquote>

显示在网页上结果为：

> 这里是一段引用  
> 也可以偷懒只在首行引用一个段落
> 
> 引用段落：Markdown是一种轻量级的标记语言，把作者从繁杂的排版工作中解放出来，实现**易读易写**的文章写作，已经逐渐成为事实上的行业标准。
> 
> **结束引用，用个空行**

引用可以嵌套，使用不同数量的“>”表示层次。

> 这里是个引用
    > > 嵌套引用
    > > 这里是个引用

编译成html之后：

<blockquote>
        <p>这里是个引用</p>
        <blockquote>
            <p>嵌套引用</p>
        </blockquote>
        <p>这里是个引用</p>
    </blockquote>

显示在网页上结果为：

> 这里是个引用
> 
> > 嵌套引用
> 
> 这里是个引用

## 2.2 代码格式化 ##

### 2.2.1 行内代码 ###

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

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

编译成html之后：

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

显示在网页上结果为：  
我们可以使用`<br>`换行，也可以使用`<p></p>`实现。  
`高亮`文字

### 2.2.1 区块代码 ###

如果需要在代码内插入反引号，需要多个反引号开始和结束一段代码。  
如果需要代码块和语法高亮，可以采用三个反引号的方式，同时可以注明语言类型。

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

## 2.3 列表 ##

### 2.3.1 无序列表 ###

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

- Red
    - Green
    - Blue

解析为

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

显示在网页上结果为：

*  Red
 *  Green
 *  Blue

### 2.3.2 有序列表 ###

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

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

解析成html：

显示在网页结果为：

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

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

显示在网页上结果为：

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

### 2.3.4 多段列表 ###

列表项里可以包含多个段落，每个项目下的段落都必须缩进 4 个空格或是 1 个制表符：

1. 学习Markdown
     学习Markdown的网站，我们可以参考文章结尾的学习资源，文档、案例、教程。
     学习起来很简单。
    2. 使用Markdown
     可以使用客户端和在线编辑器。

在网页上显示结果为：

1.  学习Markdown  
    学习Markdown的网站，我们可以参考文章结尾的学习资源，文档、案例、教程。  
    学习起来很简单。
2.  使用Markdown  
    可以使用客户端和在线编辑器。

## 2.4 链接 ##

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

### 2.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。

显示在网页上，结果为：

欢迎大家访问我的[博客][Link 1]。  
也可以不指定[链接][Link 2]的title。

### 2.4.2 参考式链接 ###

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

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

设置链接的格式为

[链接文字][链接名称]

如下面代码所说：

请大家访问我的[博客][blog],获取更多信息。
    [blog]: http://blog.csdn.net/whqet "我的CSDN博客"

解析成html为：

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

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

### 2.4.3 页内导航 ###

我们同样可以使用markdown实现页内导航，步骤如下：

1.  先定义一个锚记  
    `<div id="footer"></div>`
2.  然后设置页内链接  
    `[到底部](#footer)`  
    我们可以类似的方式去实现文章的页内导航。单击下面的链接跳转到2.4链接。

跳到链接开始位置

## 2.5 图片 ##

Markdown 使用一种和链接很相似的语法来标记图片，同样也允许两种样式： 行内式和参考式。  
行内式图片如下所示：

![Alt text](/path/to/img.jpg)
    ![Alt text](/path/to/img.jpg "Optional title")

参考式图片如下所示：

![Alt text][id]
    [id]: url/to/image "Optional title attribute"

到目前为止， Markdown 还没有办法指定图片的宽高，如果你需要的话，你可以使用普通的 标签。  
**注意**：CSDN图片如果大于显示区域，则图片宽度自适应，如果图片较小则以原始尺寸显示。  
![宽度自适应][20150315150246382]  
![原始尺寸显示][20150315150151855]

## 2.6 分割线 ##

你可以在一行中用三个以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西。你也可以在星号或是减号中间插入空格。下面每种写法都可以建立分隔线：

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

## 2.7 转义 ##

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

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

# 3.动手实践 #

1.  大家可以通过CSDN的**管理博客-博客配置-编辑器类型**设置默认的编辑器为Markdown编辑器，然后新建文章，就可以体验Markdown编辑器了。
2.  利用在线编辑工具体验Markdown，例如[markable][]，或[stackedit][], 或[作业部落][Link 4]等。
3.  下载客户端，window平台下的[MarkdownPad][]或mac平台下的[mou][]。

本文为《Markdown简明教程》系列教程的第2篇Markdown基本使用，学习Markdown的基本语法，下一篇文章我们来研读Markdown的扩展使用。

# 4.声明 #

**前端开发whqet，关注前端开发，分享相关资源。csdn专家博客，王海庆希望能对您有所帮助，限于作者水平有限，出错难免，欢迎拍砖！**  
**欢迎任何形式的转载，烦请注明装载，保留本段文字。**  
*本文原文链接，[http://blog.csdn.net/whqet/article/details/44274999][http_blog.csdn.net_whqet_article_details_44274999]*  
*欢迎大家访问独立博客[http://whqet.github.io][http_whqet.github.io]*

[2-Markdown]: /images/20220805/19f0ba8326fd4d7b8b35f0f666197852.png
[20150315122728424]: /images/20220805/292b92dcc94e429586d69c8d0b8d4d67.png
[Link 1]: http://blog.csdn.net/whqet/
[Link 2]: http://blog.csdn.net
[Link 3]: http://blog.csdn.net/whqet
[20150315150246382]: /images/20220805/88493c4a900c44e7be090bee152a8b92.png
[20150315150151855]: /images/20220805/a72477aeb6c74dc29c07d7f9a646db98.png
[markable]: http://markable.in/editor/
[stackedit]: https://stackedit.io/editor
[Link 4]: https://www.zybuluo.com/mdeditor
[MarkdownPad]: http://markdownpad.com/
[mou]: http://25.io/mou/
[http_blog.csdn.net_whqet_article_details_44274999]: http://blog.csdn.net/whqet/article/details/44274999
[http_whqet.github.io]: http://whqet.github.io