Markdown：小白基础与进阶教程

最新推荐文章于 2024-01-07 20:26:46 发布

heimu24

最新推荐文章于 2024-01-07 20:26:46 发布

阅读量892

点赞数 3

分类专栏： Markdown系列

本文链接：https://blog.csdn.net/heimu24/article/details/81186760

版权

Markdown系列专栏收录该内容

2 篇文章 13 订阅

订阅专栏

小白详细基础入门以及进阶教程

小白详细基础入门以及进阶教程
一、斜体、粗体
二、分割线
三、区块引用
四、标题样式
五、无序列表
六、有序列表
七、嵌套列表
八、链接
1、行内(inline)形式
2、加上title属性
3、参考(reference)方式：
3、自动链接：自动链接直接用一对尖括号包围即可

九、插入图片：
1、行内(inline)形式
2、参考(reference)形式

十、代码
1、代码段
2、段落代码块
3、行内代码：高亮

十一、注释和html的一样
十二、转义字符
十三、表格
进阶教程：
1、更改字体、字号、颜色
2、为文字添加背景色
3、设置图片大小

参考链接

一、斜体、粗体

Markdown语法

**双是粗体**
__星号和下划线效果一样__
*单个是斜体*
_单个是斜体_
**可以      加空格**

效果如下：

双是粗体
星号和下划线效果一样
单个是斜体
单个是斜体
可以加空格

二、分割线

三个或者以上的-_*，必须单独一行，可含有空格。

Markdown语法

---
___
***

效果如下

三、区块引用

使用’>’角括号进行区块引用

Markdown语法

>区块引用
>>多层引用

效果如下

区块引用

多层引用

四、标题样式

markdown支持两种标题语法，Setext和atx，Setext 形式是用底线的形式，利用三个或更多 = （最高阶标题）和 - （第二阶标题），Atx 形式在行首插入 1 到 6 个 # ，对应到标题 1 到 6 阶。

Markdown语法

Setext最高阶标题
===
Setext第二阶标题
---
#Atx一级标题
##Atx二级标题
###Atx三级标题
####Atx四级标题
####Atx五级标题
#####Atx六级标题

效果如下

为了目录好看，这里用了照片

五、无序列表

使用-+*号，效果一样，注意符号后面的空格，但是不能混合使用，混合的话就成了嵌套列表

Markdown语法

- 减号无序列表
- 减号无序列表
+ 加号无语列表
+ 加号无序列表
* 星号无序列表
* 星号无序列表
- - 混合使用
+ + 混合使用
+ * 混合使用
* - 混合使用

效果如下

减号无序列表
减号无序列表
加号无语列表
加号无序列表
星号无序列表
星号无序列表
- 混合使用
- 混合使用
- 混合使用
- 混合使用

六、有序列表

使用数字和英文句点，数字可以无序，注意点后面的空格

Markdown语法

1. 有序列表1
2. 有序列表2
5. 有序列表5
8. 有序列表8
6. 有序列表6

效果如下

有序列表1
有序列表2
有序列表5
有序列表8
有序列表6

七、嵌套列表

注意第二级的前后都有空格

Markdown语法

- 嵌套列表1
     - 嵌套列表2
     - 嵌套列表3
      - 嵌套列表4
        -  嵌套列表5

效果如下
- 嵌套列表1
- 嵌套列表2
- 嵌套列表3
- 嵌套列表4
- 嵌套列表5

八、链接

链接有两种，行内(inline) 和参考(reference)两种形式

1、行内(inline)形式

行内形式是直接在后面用括号直接接上链接

Markdown语法

[百度](www.baidu.com)

效果如下

百度

2、加上title属性

也可以加上title属性，注意中间有个空格，使用双引号，把鼠标放在链接上，就可以看出区别了

Markdown语法

[百度](www.baidu.com "with a title")

效果如下

百度

3、参考(reference)方式：

Markdown语法

这是[Google][1] ，这是[Yahoo][2]，这是[MSN][3].
[1]: http://google.com/ "Google"
[2]: http://search.yahoo.com/ "Yahoo Search"
[3]: http://search.msn.com/ "MSN Search"

效果如下

这是Google ，这是Yahoo，这是MSN.

3、自动链接：自动链接直接用一对尖括号包围即可

Markdown语法

<https://www.baidu.com>

效果
https://www.baidu.com

九、插入图片：

图片的语法和文字链接的形式很像，只不过前面加个!，后面跟图片的地址

1、行内(inline)形式

(注意title属性是可选的)

Markdown语法

![kobe](https://i-blog.csdnimg.cn/blog_migrate/714b1fac576603ac8efe92140d138537.jpeg "Kobe Bryant")

效果如下

kobe

2、参考(reference)形式

效果和上面一样

Markdown语法

![kobe][id]
[id]:https://i-blog.csdnimg.cn/blog_migrate/714b1fac576603ac8efe92140d138537.jpeg "Kobe Bryant"

十、代码

1、代码段

代码段在一般的段落文字中，你可以使用反引号 ` 来标记代码区段，区段内的 &、< 和 > 都会被自动的转换成 HTML 实体，这项特性让你可以很容易的在代码区段内插入 HTML 码：

Markdown语法

I strongly recommend against using any `<blink>` tags.
I wish SmartyPants used named entities like `&mdash;`
instead of decimal-encoded entites like `&#8212;`

效果如下

I strongly recommend against using any <blink> tags.
I wish SmartyPants used named entities like —
instead of decimal-encoded entites like —.

2、段落代码块

如果要建立一个已经格式化好的代码区块，只要每行都

缩进 4 个空格或是一个 tab

就可以了，而 &、< 和 > 也一样会自动转成 HTML 实体。

效果如下

我是代码块
我是代码块
我是代码块

3、行内代码：高亮

在第一行的后面指定编程语言，也可以不指定。（Markdown目前好像不支持更改代码块背景颜色。。。。）

Markdown语法

```  python
@requires_authorization
def somefunc(param1='', param2=0):
    '''A docstring'''
    if param1 > param2: # interesting
        print 'Greater'
    return (param2 - param1 + 1) or None
class SomeClass:
    pass
>>> message = '''interpreter
... prompt'''

```

效果如下

@requires_authorization
def somefunc(param1='', param2=0):
    '''A docstring'''
    if param1 > param2: # interesting
        print 'Greater'
    return (param2 - param1 + 1) or None
class SomeClass:
    pass
>>> message = '''interpreter
... prompt'''

十一、注释和html的一样

<!-- 注释 -->

十二、转义字符

Markdown语法

\\ 反斜杠
\` 反引号
\* 星号
\_ 下划线
\{\} 大括号
\[\] 中括号
\(\) 小括号
\# 井号
\+ 加号
\- 减号
\. 英文句号
\! 感叹号

效果如下

\ 反斜杠
` 反引号
* 星号
_ 下划线
{} 大括号
[] 中括号
() 小括号
# 井号
+ 加号
- 减号
. 英文句号
! 感叹号

十三、表格

Markdown语法

| name          | age           | sex   |
| ------------- | ------------- | ------|
| kobe          | 8             |  man  |
| bryant        | 24            |  man  |

效果如下

name	age	sex
kobe	8	man
bryant	24	man

Markdown语法

name    |   age
---     |   ---
kobe    |   8
bryant  |   24

效果如下

name	age
kobe	8
bryant	24

进阶教程：

1、更改字体、字号、颜色

Markdown 通过简单标记语法，使普通文本内容具有一定格式。但它本身不支持修改字体、字号与颜色等功能的。CSDN-markdown 编辑器是其衍生版本，支持基于 PageDown ( Stack Overflow）所使用的编辑器的扩展功能（如表格、脚注、内嵌HTML、内嵌 LaTeX 等等）。
Size：规定文本的尺寸大小，取值从 1 到 7 ，浏览器默认值是 3.

Markdown语法

<font face="黑体">我是黑体字</font>
<font face="微软雅黑">我是微软雅黑</font>
<font face="STCAIYUN">我是华文彩云</font>
<font color=red>我是红色</font>
<font color=#008000>我是绿色</font>
<font color=Blue>我是蓝色</font>
<font size=5>我是尺寸</font>
<font face="黑体" color=green size=5>我是黑体，绿色，尺寸为5</font>

效果如下

我是黑体字
我是微软雅黑
我是华文彩云
我是红色
我是绿色
我是蓝色
我是尺寸
我是黑体，绿色，尺寸为5

2、为文字添加背景色

由于 style 标签和标签的 style 属性不被支持，所以这里只能是借助 table, tr, td 等表格标签的 bgcolor 属性来实现背景色。故这里对于文字背景色的设置，只是将那一整行看作一个表格，更改了那个格子的背景色（bgcolor）

Markdown语法

<table><tr><td bgcolor=yellow>背景色yellow</td></tr></table>

效果如下

背景色yellow

3、设置图片大小

Markdown语法：更改图片百分比

<img src="https://i-blog.csdnimg.cn/blog_migrate/714b1fac576603ac8efe92140d138537.jpeg" width="50%" height="50%">

效果如下

Markdown语法：更改图片像素值

<img src="https://i-blog.csdnimg.cn/blog_migrate/714b1fac576603ac8efe92140d138537.jpeg" width="251" height="350" >

效果如下

Markdown语法：图片居中

<div align=center><img src="https://i-blog.csdnimg.cn/blog_migrate/714b1fac576603ac8efe92140d138537.jpeg" width="50%" height="50%"></div>

效果如下

ps：right、left

基础知识：
[TOC]                 #生成目录
&#160;或者&nbsp;      #空格

参考链接

RGB颜色对照表

Markdown 语法大全包括设置字体颜色

Markdown: Basics （快速入门）

CSDN-markdown 文字样式设置（字体, 大小, 颜色, 高亮底色）

heimu24

关注

3
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
Markdown：小白基础与进阶教程

一、斜体、粗体**双是粗体**__星号和下划线效果一样__*单个是斜体*_单个是斜体_**可以加空格**效果如下：双是粗体星号和下划线效果一样单个是斜体单个是斜体可以加空格二、分割线三个或者以上的-_*，必须单独一行，可含有空格---___***效果如下：三、区块引用使用’&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;’角括号进行区...
复制链接

扫一扫

专栏目录