Markdown 利用HTML进行优雅排版

Markdown 利用HTML进行优雅排版

我在使用Markdown整理文档的时候发现，Markdown本身对文本格式的排版很单一，只有编号、字体加粗、固定标题格式等一些基础的排版，使用不够灵活，好在Markdown中可以使用HTML，所以我利用HTML增加了一些板块，方便对文档进行标注或者分层整理。

一、标注重点

• 功能描述：在不同位置插入图片作为重点标注。

• 实现效果：

数据分析方法（这是重点！需要进行重点标记）

• 代码如下：

<img align = "left"  src="https://img2023.cnblogs.com/blog/2843096/202303/2843096-20230315122541872-818598143.png"  width="38" height="30">

• 使用场景：

1、标记：可以使用不同的图片进行标记。那么这些图片怎么来呢，首先搜索你想要的图片，例如搜索“紫色五角星图片”，然后复制图片到word文档中插入，点击图片格式，删除图片背景后处理成你想要的样子，最后在md中插入图片调整图片的位置和大小。

2、存放图片：例如在用md写的简历中插入证件照，只需将代码修改成如下形式：

<img align = "right"  src="这里输入图片地址"  width="114" height="100">

3、文字围绕图片：通过HTML可以设置图片的位置和大小。实际应用效果如下：

输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本

输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本

二、内容分层

• 功能描述：

有时候想用横线划分一下内容的层次，发现md中横线与文字间的间距过大，且为固定不可调整。利用HTML可以调整横线的宽度、颜色以及与文字的间距。

• md中的效果：

• 利用HTML实现效果：

项目

第一段输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本

第二段输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本

• 代码如下：

<div>
    <div style="width:100%;height:4px;background:#a79d91;padding:0px 0px 0px 0px;"></div>
    <div style="margin-top:0.3%;font-size: 23px;color:#a79d91;font-family:'微软雅黑';font-weight:500;">项目</div>
    <div title="第一段">
        <span style="font-size:18px;color:#dbd0bf;font-family:'微软雅黑';font-weight:400;">第一段输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本</span>
    </div>
    <div title="第二段">
        <span style="font-size:14px;color:#8b8d8e;font-family:'微软雅黑';font-weight:400;">第二段输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本</span>
    </div>
</div>

• 应用场景：

1、添加线上或者线下的文字：示例中给出的是线下添加文字，实际上既可以线上又可以线下添加文字，例如这样：

项目标题

项目实施计划

第一段输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本

第二段输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本

2、单独添加横线：也可以单独添加一条横线，用于隔开模块与模块之间的内容。

• 为什么这样设计：

用横线分隔开后，整体的排版更清晰，模块间的边界感更舒服，内容层次一目了然，有助于阅读和理解。

三、文字居中加横线

• 功能描述：

文字始终在横线中间，并且文字和横线的样式都可以调整。

• 实现效果：

我是中间的文字,无论如何始终在中间

• 代码如下：

<div style="width: 100%;height:4px;position: relative;background-color: #a79d91;margin: 2% 0 2% 0;text-align:center;">
     <span style="display:inline-block;background-color: #FFF;padding: 0 20px;color: #303133;transform: translateY(-50%);font-size: 23px;">我是中间的文字,无论如何始终在中间		        </span>
</div>

• 应用场景：

1、段落标题：适合放在段落中标题的部分。

2、分隔符：或者作为分隔符放在段与段之间。效果如下：

输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本

下面是附录内容

（1）输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本

（2）输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本

四、同一行分段调整

• 功能描述：

在同一行中的右侧添加一段文字，并且文字样式可调整。

• 实现效果：

项目名称
2020-2023

• 代码如下：

<h3><a class="md-header-anchor"></a>
    <span>项目名称</span>
    <span style="display:inline-block;position: absolute;right:0;color:red;font-size:18px;font-weight:540;line-height:2.2rem;">2020-2023</span>
</h3>

• 应用场景：

应用在段落标题中：右边的文字可以起补充说明的作用，代替以往补充说明常用的“（）”，这样整体排版也很对称。

五、添加外框

• 功能描述：

一个可以调整样式的外框，里面可以输入可调整样式的文本。

比如在这样的样式中，添加一个方框会显得内容非常有条理，我时常会用md中的代码块替代方框，但是代码块中编辑的文字不可以调整样式，所以做了下面的方框，既可以调整方框的样式又可以调整里面文字的样式。

这是代码框：

输入内容不可以调整样式

这是HTML写的方框：

第一段输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本

第二段输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本

代码解释：padding：上右下左（间距）；front-size: 字号。

• 代码如下：

<div style="width:100%;min-height:100px;background:#f8f8f8;border: 1px solid #e7eaed;" contenteditable="true">
<div title="第一段">
        <span style="font-size:18px;color:#dbd0bf;font-family:'微软雅黑';font-weight:400;">第一段输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本</span>
    </div>
    <div title="第二段">
        <span style="font-size:14px;color:#8b8d8e;font-family:'微软雅黑';font-weight:400;">第二段输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本</span>
    </div>
</div>

六、合并单元格

• 功能描述：

md中对表格的处理很单一，只能进行简单的行、列删除和新增，表格中的文字也只有左、右、居中的格式调整，像是常用的合并单元格的操作就需要使用HTML来处理。

• 实现效果：

类型	类别	函数名	描述
取整
	向下
		floor(expr)	返回小于expr的最大整数
	向上
		ceil(expr)	返回大于expr的最小整数
		ceiling(expr)	返回大于expr的最小整数
	四舍五入
		round(expr)	四舍五入取整，后面没有num默认取整
		round(expr,num)	四舍五入取整，num为0表示取整
	不四舍五入
		truncate(expr,num)	不四舍五入取整，num为0表示取整
取小数
	四舍五入
		round(expr,num)	四舍五入取小数，num指取几位小数
	不四舍五入
		truncate(expr,num)	不四舍五入取小数，num指取几位小数
		round(floor(expr*temp)/temp,num)	其中temp=10^num，num指取几位小数
这是列合并			第四列

• 代码如下：

<table>
<tr>
  <th>类型</th>
  <th>类别</th>
  <th>函数名</th>
  <th>描述</th>
</tr>
<tr>
  <td rowspan = '11'>取整（这是行合并）
  </td>
</tr>
<tr>
  <td rowspan = '2'>向下
  </td>
</tr>
<tr>
  <td>floor(expr)</td>
  <td>返回小于expr的最大整数</td>
</tr>
<tr>
  <td rowspan = '3'>向上
  </td>
</tr>
<tr>
  <td>ceil(expr)</td>
  <td>返回大于expr的最小整数</td>
</tr>
<tr>
  <td>ceiling(expr)</td>
  <td>返回大于expr的最小整数</td>
</tr>
<tr>
  <td rowspan = '3'>四舍五入
  </td>
</tr>
<tr>
  <td>round(expr)</td>
  <td>四舍五入取整，后面没有num默认取整</td>
</tr>
<tr>
  <td>round(expr,num)</td>
  <td>四舍五入取整，num为0表示取整</td>
</tr>
<tr>
  <td rowspan = '2'>不四舍五入
  </td>
</tr>
<tr>
  <td>truncate(expr,num)</td>
  <td>不四舍五入取整，num为0表示取整</td>
</tr>
<tr>
  <td rowspan = '7'>取小数
  </td>
</tr>
<tr>
  <td rowspan = '2'>四舍五入
  </td>
</tr>
<tr>
  <td>round(expr,num)</td>
  <td>四舍五入取小数，num指取几位小数</td>
</tr>
<tr>
  <td rowspan = '4'>不四舍五入
  </td>
</tr>
<tr>
  <td>truncate(expr,num)</td>
  <td>不四舍五入取小数，num指取几位小数</td>
<tr>
<tr>
  <td>round(floor(expr*temp)/temp,num)</td>
  <td>其中temp=10^num，num指取几位小数</td>
<tr>
<tr>
  <td colspan = '3'>这是列合并</td>
  <td>第四列</td>
</tr>
</table>

注：文章中具体且完整的应用，会在后续文章中给出。