小白必看,用 Markdown 代码写出好看的页面

文章目录

  • 段落格式
    • 字体设置
    • 粗斜体
    • 下划线
    • 删除线
    • 脚注格式
  • 引用格式
    • 嵌套结构
    • 引用中使用列表
    • 列表项中的引用
  • 代码格式
    • 行内代码
    • 代码块
  • 图片样式
  • 链接样式
  • 表格样式
  • 支持的HTML标签
  • 转义字符
  • 特殊符号

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

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

段落格式

字体设置

Markdown代码

红色10号隶书

运行结果:

红色10号隶书

粗斜体

  1. 用*表示
    Markdown代码

    *斜体*  
    **粗体**  
    ***粗斜体***
    

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

  2. 用下划线表示
    Markdown代码

    _斜体_  
    __粗体__  
    ___粗斜体___
    

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


下划线

Markdown代码:

带下划线文本

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


删除线

Markdown代码:

~~删除线~~

显示结果为:
删除线

脚注格式

Markdown代码:

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

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


引用格式

嵌套结构

Markdown代码:

> 最外层
>> 第一层嵌套
>>> 第二层嵌套

显示结果:

最外层

第一层嵌套

第二层嵌套


引用中使用列表

Markdown代码:

> 引用中使用列表
> 1. 有序列表第一项
> 2. 有序列表第二项
> 3. 有序列表第三项
> + 无序列表第一项
> + 无序列表第二项
> + 无序列表第三项

显示结果:

引用中使用列表

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

列表项中的引用

Markdown代码:

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

显示结果:

  1. 第一项

    第一行引用
    第二行引用

  2. 第二项
  3. 第三项

代码格式

行内代码

Markdown代码:

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

显示结果:

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


代码块

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

图片样式

  1. 直接放置图片
    Markdown代码:
    ![戴帽子的犬夜叉.png] (https://img-blog.csdnimg.cn/20200223224726458.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyOTA3ODAy,size_16,color_FFFFFF,t_70)
    
    显示结果:
  2. 鼠标悬浮时,显示名称
    Markdown代码:
    ![戴帽子的犬夜叉.png] (https://img-blog.csdnimg.cn/20200223224726458.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyOTA3ODAy,size_16,color_FFFFFF,t_70 "戴帽子的犬夜叉")
    
    显示结果:
  3. 使用img标签定义图片的宽高
    Markdown代码:
    
    
    显示结果:

链接样式

  1. 直接写
    Markdown代码:

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

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

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

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

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


表格样式

Markdown代码:

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

显示结果:

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

支持的HTML标签

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

Win+Prtsc 快速截图  
强调  
加强强调  
加粗  
倾斜  
上标如,32  
下标,如CO2  
换行符
分割线

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

分割线


转义字符

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

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

特殊符号

符号 代码
© ©
& &
< <
> >
£ £
¥ ¥
® ®
± ±
§ §
¾ ¾
« «
» »
37ºC 37ºC

  1. Lorem ipsum dolor. ↩︎

你可能感兴趣的:(笔记)