¶ 引言
Markdown从 HTML 发展而来，但是摆脱了 HTML 冗长的标签束缚。她有着记事本环境下的便捷操作方式，同时也能做到像 Word\Pages 一样的布局效果。她既能无障碍地切换于不同编辑器，又可以无压力地让多人协作编辑。
Markdown 书写简单，不限制编辑器，用几个符号便可以解决排版问题。但同时，由于缺乏公认的、与时俱进的官方标准，Markdown在使用上仍存在许多不便。
为方便本人的博客搭建，特整理常用的Markdown书写模板，以便需要时查阅。
更多信息点击【开源文档】Markdown简介
¶ 1 音乐
¶ 1.1 音频播放器
网银云音乐的ID可以在软件中点击选择分享→复制链接中获取，使用时只替换id号即可。
示例1：
# 使用时替换网易云ID即可
<div style="text-align: center;">
<audio controls loop>
<source src="http://music.163.com/song/media/outer/url?id=2673296815.mp3" type="audio/mpeg">
您的浏览器不支持音频播放。
</audio>
</div>
其渲染结果如下：
示例2：
# 带边框版本
<div style="text-align: center; border: 2px solid #ccc; padding: 10px; width: fit-content; margin: 0 auto;">
<audio controls loop>
<source src="http://music.163.com/song/media/outer/url?id=2673296815.mp3" type="audio/mpeg">
您的浏览器不支持音频播放。
</audio>
</div>
其渲染结果如下：
¶ 2 图片排版
¶ 2.1 创建图床
图床地址 点击快速跳转：
https://cdn.jsdelivr.net/gh/HaochengGuan/wiki-pic/
自动上传脚本：
@echo off
rem 切换到指定目录
cd /d C:\Haocheng\wiki-pic\wiki-pic
rem 检查目录切换是否成功
if %errorlevel% neq 0 (
echo 无法切换到指定目录，请检查目录路径是否正确。
exit /b 1
)
rem 添加所有更改的文件到暂存区
git add .
set COMMIT_MESSAGE="update"
rem 检查是否有文件被修改或添加
for /f "delims=" %%i in ('git status --porcelain') do set CHANGES=%%i
if "%CHANGES%"=="" (
echo 没有文件被修改，无需提交。
exit /b 0
)
rem 检查 COMMIT_MESSAGE 环境变量是否存在
if "%COMMIT_MESSAGE%"=="" (
echo 未设置 COMMIT_MESSAGE 环境变量，无法进行提交。
exit /b 1
)
rem 提交更改
git commit -m "%COMMIT_MESSAGE%"
rem 推送更改到远程仓库
git push origin main
rem 检查推送是否成功
if %errorlevel% equ 0 (
echo 代码已成功推送到远程仓库。
) else (
echo 推送代码到远程仓库时出错。
)
rem 暂停窗口，等待用户按键
pause
¶ 2.2 图片的大小设置与图片样式管理
- Markdown代码：
{.radius-7 .decor-shadow}
是标准的Markdown语法，用于插入图片=1000x是一个非标准的Markdown扩展，用于指定图片的宽度，高度会根据图片大小自适应调整{.radius-7 .decor-shadow}是嵌入的HTML/Markdown自定义类radius-7用于设置图片的圆角效果，radius-7 表示圆角的程度.decor-shadow用于为图片添加阴影效果
示例1：
<div style="text-align: center;">
<img src="https://images.wallpaperscraft.com/image/single/ocean_coast_horizon_140764_1280x720.jpg" alt="图片描述" style="width: 500px; height: auto; border-radius: 7px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);">
</div>
其渲染结果如下：
示例2：
# 带题注的图片
<div style="text-align: center;">
<img src="图片链接" alt="图片描述" style="width: 500px; height: auto; border-radius: 7px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);">
<figcaption>图片题注</figcaption>
</div>
其渲染结果如下：
示例1：
注意：使用Markdown代码无法做到图片居中，展示图为html代码呈现效果
¶ 3 字体
¶ 3.1 字体格式
在 Markdown 文件中，建议使用 <font> 标签的 face 属性修改文字字体。
示例1：
这里是默认字体
<font face="宋体">这里是宋体</font>
<font face="仿宋">这里是仿宋</font>
<font face="楷体">这里是楷体</font>
其渲染结果如下：
这里是默认字体
这里是宋体
这里是仿宋
这里是楷体
¶ 3.2 字体大小
示例1：
<font size=5>5号字</font>
其渲染结果如下：
5号字
示例2：
这段文字里既包含<big>放大了的文字</big>，也包含<small>缩小了的文字</small>
>
其渲染结果如下：
这段文字里既包含放大了的文字，也包含缩小了的文字
示例1：
<font size=5>5号字</font>
¶ 3.3 其它用法
¶ 3.3.1 高亮显示
示例1：
<mark>高亮显示</mark>
其渲染结果如下：
高亮显示
¶ 3.3.2 添加背景颜色
示例1：
<table><tr><td bgcolor="yellow">搞点颜色</td></tr></table>
其渲染结果如下：
| 搞点颜色 |
示例2：
# 使用图片作背景
<font style="background: url('https://images.wallpaperscraft.com/image/single/plantation_rice_agriculture_128917_1366x768.jpg') ">I wish you a Merry Christmas</font>
其渲染结果如下：
I wish you a Merry Christmas
示例3：
# 渐变背景色
<font style="background: url('https://images.wallpaperscraft.com/image/single/plantation_rice_agriculture_128917_1366x768.jpg') ">I wish you a Merry Christmas</font>
其渲染结果如下：
太阳太阳，给我们带来，七色光彩
¶ 3.3.3 文本注音
示例1：
<ruby>饕餮 <rt>tāo tiè</rt></ruby>
其渲染结果如下：
饕餮
¶ 3.3.4 文字颜色
在 Markdown 文件中，建议使用 <font> 标签的 color 属性修改文字颜色
示例1：
<font color="red">红色字体</font>
<font color="green">绿色字体</font>
<font color="blue">蓝色字体</font>
<font style="color: rgb(200,100,100)">使用 rgb 颜色值</font>
<font style="color: #FF00BB">使用十六进制颜色值</font>
其渲染结果如下：
红色字体
绿色字体
蓝色字体
使用 rgb 颜色值
使用十六进制颜色值
¶ 3.3.5 文字效果
| 标签 | 描述 | 示例 |
|---|---|---|
<kbd> |
标签定义键盘文本样式 | 文本 |
:joy: |
Emoji 表情 从Emojipedia选择心仪的表情 |  |
- [ ] |
待办事项TODO，已完成用- [x]表示 |
1 |
¶ 3.3.6 阅读模式
#### 夜读模式
##### 《春》 朱自清
盼望着，盼望着，东风来了，春天的脚步近了。
一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。
小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。
<style>
body { background-color: #000 !important; }
h1,h2,h3,h4,h5,h6,h7,p { color: #999 !important; }
</style>
¶ 4 表格
¶ 4.1 基础表示
Markdown代码：
- 要添加表，请使用三个或多个连字符（—）创建每列的标题，并使用管道（|）分隔每列。您可以选择在表的任一端添加管道。
- 单元格宽度可以变化，如下所示。呈现的输出将看起来相同。
- 使用连字符和管道创建表可能很麻烦。为了加快该过程，请尝试使用Markdown Tables Generator。使用图形界面构建表，然后将生成的Markdown格式的文本复制到文件中
| Syntax | Description |
| ----------- | ----------- |
| Header | Title |
| Paragraph | Text |
| Syntax | Description |
|---|---|
| Header | Title |
| Paragraph | Text |
¶ 4.2 对齐
- 您可以通过在标题行中的连字符的左侧，右侧或两侧添加冒号（:），将列中的文本对齐到左侧，右侧或中心。
| Syntax | Description | Test Text |
| :--- | :----: | ---: |
| Header | Title | Here's this |
| Paragraph | Text | And more |
| Syntax | Description | Test Text |
|---|---|---|
| Header | Title | Here’s this |
| Paragraph | Text | And more |
Markdown不支持动态调整表格宽度，可以通过
<div sytle="width: 500pt">来控制。
¶ 4.3 宽度控制
<table style="width: 100%; border-collapse: collapse; border: 1px solid #ccc;">
<thead>
<tr style="background-color: #f2f2f2;">
<th style="border: 1px solid #ccc; padding: 8px;">表头1</th>
<th style="border: 1px solid #ccc; padding: 8px;">表头2</th>
<th style="border: 1px solid #ccc; padding: 8px;">表头3</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border: 1px solid #ccc; padding: 8px;">数据1</td>
<td style="border: 1px solid #ccc; padding: 8px;">数据2</td>
<td style="border: 1px solid #ccc; padding: 8px;">数据3</td>
</tr>
<tr>
<td style="border: 1px solid #ccc; padding: 8px;">数据4</td>
<td style="border: 1px solid #ccc; padding: 8px;">数据5</td>
<td style="border: 1px solid #ccc; padding: 8px;">数据6</td>
</tr>
</tbody>
</table>
| 表头1 | 表头2 | 表头3 |
|---|---|---|
| 数据1 | 数据2 | 数据3 |
| 数据4 | 数据5 | 数据6 |
简易版：
<table style="width: 100%; border-collapse: collapse;">
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
</tr>
<tr>
<td>数据4</td>
<td>数据5</td>
<td>数据6</td>
</tr>
</tbody>
</table>
| 表头1 | 表头2 | 表头3 |
|---|---|---|
| 数据1 | 数据2 | 数据3 |
| 数据4 | 数据5 | 数据6 |
¶ 4.4 选项卡
- 用markdown实现选项卡只需在标题后面加上 {.tabset}属性，这样该标题就会变成选项卡的标题，后面在接上低一级的标题，这个标题就会变成选项卡的标题，有多少个低一级的标题就相当于有几个选项卡，选项卡的内容就直接跟着选项卡标题的后面即可，下面给出示例代码:
# Markdown {.tabset}
## Title1
Text1
## Title2
Text2
#的级别与当前目录同级，选项卡后暂时无法添加其他内容，需通过新一级目录跳出选项卡。
Text1
Text2
¶ 4.5 折叠功能
- 目前折叠功能只能展示文本，且不支持换行。示例代码如下：
<details>
<summary>点击展开查看详情</summary>
这里是下拉栏展开后显示的详细内容。可以包含文本、图片、列表等各种 Markdown 元素。
</details>
点击展开查看详情
这里是下拉栏展开后显示的详细内容。可以包含文本、图片、列表等各种 Markdown 元素。
¶ 5 流程图
可以使用多种代码的组合进行多个流程图的绘制，具体可以查看：Markdown骚操作｜字体颜色、字体背景、流程图一网打尽
¶ 6 行内代码
¶ 脚注
这是一号脚注[^1]
这是二号脚注[^2]
[^1]: 在此处接下来的文本中输入脚注内容
[^2]: 脚注内容可以在编辑中续写，内容会自动置底，