Please enable Javascript to view the contents

用Markdown代码写出好看的页面

 ·  ☕ 4 分钟  ·  🤖 Vigilr

作为一个学习计算机相关知识的人,如果不经常写博客,就容易把刚学到的知识忘记,写博客是一个很好的学习习惯,而写好博客也就是要学会熟练使用 Markdown,这样可以很好地使我们的博客页面变得更加美观,这篇文章介绍的就是一些使用的 Markdown 使用技巧。

推荐工具:Typora,VScode(插件Markdown-preview-enhanced)

段落格式

字体设置

Markdown 代码

1
<font size=10 face="隶书" color=#ff0000>红色 10 号隶书</font>

运行结果:

红色 10 号隶书

粗斜体

  1. 用*表示
    Markdown 代码

    1
    2
    3
    
    _斜体_  
    **粗体**  
    **_粗斜体_**
    

    显示结果为:
    斜体
    粗体
    粗斜体

  2. 用下划线表示
    Markdown 代码

    1
    2
    3
    
    _斜体_  
    **粗体**  
    **_粗斜体_**
    

    显示结果为:
    斜体
    粗体
    粗斜体


下划线

Markdown 代码:

1
<u>带下划线文本</u>

显示结果为:
带下划线文本


删除线

Markdown 代码:

1
~~删除线~~

显示结果为:
删除线

脚注格式

Markdown 代码:

1
2
创建脚注格式是这样的 [^lorem]。  
[^lorem]: Lorem ipsum dolor.

显示结果为:
创建脚注格式是这样的 1


引用格式

嵌套结构

Markdown 代码:

1
2
3
4
5
> 最外层
>
> > 第一层嵌套
> >
> > > 第二层嵌套

显示结果:

最外层

第一层嵌套

第二层嵌套


引用中使用列表

Markdown 代码:

1
2
3
4
5
6
7
8
9
> 引用中使用列表
>
> 1. 有序列表第一项
> 2. 有序列表第二项
> 3. 有序列表第三项
>
> - 无序列表第一项
> - 无序列表第二项
> - 无序列表第三项

显示结果:

引用中使用列表

  1. 有序列表第一项
  2. 有序列表第二项
  3. 有序列表第三项
  • 无序列表第一项
  • 无序列表第二项
  • 无序列表第三项

列表项中的引用

Markdown 代码:

1
2
3
4
5
1. 第一项
   > 第一行引用
   > 第二行引用
2. 第二项
3. 第三项

显示结果:

  1. 第一项

    第一行引用
    第二行引用

  2. 第二项
  3. 第三项

代码格式

行内代码

Markdown 代码:

1
Python 代码`print('helloworld')`,控制台打印 helloworld

显示结果:

Python 代码print('helloworld'),控制台打印 helloworld


代码块

  1. 按 Tab 键或四个空格
  2. 用```包括起来,第一个后面加上代码语言,可以高亮显示

图片样式

  1. 直接放置图片
    Markdown 代码:
    1
    
    ![戴帽子的犬夜叉.png](https://cdn.jsdelivr.net/gh/eternidad33/picbed@master/img/戴帽子的犬夜叉.png)
    

    显示结果:
    戴帽子的犬夜叉.png

  2. 鼠标悬浮时,显示名称
    Markdown 代码:
    1
    
    ![戴帽子的犬夜叉.png](https://cdn.jsdelivr.net/gh/eternidad33/picbed@master/img/戴帽子的犬夜叉.png "戴帽子的犬夜叉")
    

    显示结果:
    戴帽子的犬夜叉.png

  3. 使用 img 标签定义图片的宽高
    Markdown 代码:
    1
    
    <img src='https://cdn.jsdelivr.net/gh/eternidad33/picbed@master/img/戴帽子的犬夜叉.png' width=50% height=50%>
    

    显示结果:


链接样式

  1. 直接写
    Markdown 代码:

    1
    
    [百度一下,你就知道](https://www.baidu.com)
    

    显示结果:
    百度一下,你就知道

  2. 链接用 a 作为网址变量,然后为变量赋值
    Markdown 代码:

    1
    2
    
    [百度一下,你就知道][a]
    [a]: https://www.baidu.com
    

    显示结果:
    百度一下,你就知道


表格样式

Markdown 代码:

1
2
3
4
| 左对齐 | 居中对齐 | 右对齐 |
| :----- | :------: | -----: |
| 1      |    2     |      3 |
| 4      |    5     |      6 |

显示结果:
| 左对齐 | 居中对齐 | 右对齐 |
| :—– | :——: | —–: |
| 1 | 2 | 3 |
| 4 | 5 | 6 |


支持的 HTML 标签

Markdown 支持很多 HTML 标签,下面列举几个常用的标签
Markdown 代码:

1
2
3
4
5
6
7
8
9
<kbd>Win</kbd>+<kbd>Prtsc</kbd> 快速截图  
<em>强调</em>  
<strong>加强强调</strong>  
<b>加粗</b>  
<i>倾斜</i>  
上标如,3<sup>2</sup>  
下标,如 CO<sub>2</sub>  
换行符<br>  
分割线<hr>

显示结果:
Win+Prtsc 快速截图
强调
加强强调
加粗
倾斜
上标如,32
下标,如 CO2
换行符

分割线


转义字符

以下这些符号前面加上反斜杠\来帮助插入普通的符号:

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

特殊符号

符号 代码
© &copy;
&trade;
& &amp;
< &lt;
> &gt;
£ &pound;
¥ &yen;
&euro;
® &reg;
± &plusmn;
§ &sect;
X&sup2;
Y&sup3;
¾ &frac34;
« &laquo;
» &raquo;
37ºC 37&ordm;C

  1. Lorem ipsum dolor. ↩︎

分享
您的鼓励是我最大的动力
alipay QR Code
wechat QR Code

Vigilr
作者
Vigilr
大四学生