Markdown 利用HTML进行优雅排版 |
您所在的位置：网站首页 › h5显示markdown › Markdown 利用HTML进行优雅排版 |
Markdown 利用HTML进行优雅排版
|
我在使用Markdown的时候发现，Markdown本身对文本格式的排版很单一，只有编号、字体加粗、固定标题格式等一些基础的排版，使用不够灵活，好在Markdown中可以使用HTML，所以我利用HTML增加了一些板块，方便对文档进行标注或者分层整理。 一、标注重点功能描述：在不同位置插入图片作为重点标注。 实现效果：  数据分析方法 （这是重点！需要进行重点标记）
代码如下：
使用场景：
1、标记：可以使用不同的图片进行标记。那么这些图片怎么来呢，首先搜索你想要的图片，例如搜索“紫色五角星图片”，然后复制图片到word文档中插入，点击图片格式，删除图片背景后处理成你想要的样子，最后在md中插入图片调整图片的位置和大小。 2、存放图片：例如在用md写的简历中插入证件照，只需将代码修改成如下形式： 3、文字围绕图片：通过HTML可以设置图片的位置和大小。实际应用效果如下：
输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本 二、内容分层 功能描述：有时候想用横线划分一下内容的层次，发现md中横线与文字间的间距过大，且为固定不可调整。利用HTML可以调整横线的宽度、颜色以及与文字的间距。 md中的效果：
1、添加线上或者线下的文字：示例中给出的是线下添加文字，实际上既可以线上又可以线下添加文字，例如这样：
2、单独添加横线：也可以单独添加一条横线，用于隔开模块与模块之间的内容。 为什么这样设计：用横线分隔开后，整体的排版更清晰，模块间的边界感更舒服，内容层次一目了然，有助于阅读和理解。 三、文字居中加横线 功能描述：文字始终在横线中间，并且文字和横线的样式都可以调整。 实现效果：
1、段落标题：适合放在段落中标题的部分。 2、分隔符：或者作为分隔符放在段与段之间。效果如下：
在同一行中的右侧添加一段文字，并且文字样式可调整。 实现效果：
应用在段落标题中：右边的文字可以起补充说明的作用，代替以往补充说明常用的“（）”，这样整体排版也很对称。 五、添加外框 功能描述：一个可以调整样式的外框，里面可以输入可调整样式的文本。
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指取几位小数这是列合并第四列 代码如下： 类型 类别 函数名 描述 取整（这是行合并） 向下 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指取几位小数 这是列合并 第四列注：文章中具体且完整的排版应用，会在后续文章中给出。 非常荣幸您能阅读到最后，希望文章中的内容能够帮助到您。 本博客内容均为博主原创，未经授权，请勿转载，谢谢！ |
【本文地址】
今日新闻 |
推荐新闻 |