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>
注：文章中具体且完整的应用，会在后续文章中给出。
Markdown 利用HTML进行优雅排版的更多相关文章
- 【springboot】之利用shell脚本优雅启动，关闭springboot服务
springbot开发api接口服务,生产环境中一般都是运行独立的jar,在部署过程中涉及到服务的优雅启动,关闭, springboot官方文档给出的有两种方式, 1.使用http shutdown ...
- 利用Lombok编写优雅的spring依赖注入代码,去掉繁人的@Autowired
大家平时使用spring依赖注入,都是怎么写的? @Servicepublic class OrderService {@Autowiredprivate UserService userServic ...
- 玩转公众号markdown排版
Md2All 简介 Markdown排版利器,支持 "一键排版" 的样式模板选择,支持"css样式自定义",支持80多种代码高亮. 能让Markdown内容,无 ...
- [转]有道云笔记markdown
作为半个文字工作者,一天当中,一半时间用在遣词造句,一半时间则在死磕排版.当听说“前所未有的极简语法”Markdown,不仅能简化排版.大大提高书写效率,而且上手零门槛.好奇宝宝怎么忍得住一颗蠢蠢欲动 ...
- Markdown的入门教程，非常的使用
原文链接: https://www.jianshu.com/p/20e82ddb37cb 链接地址 点我 粘贴进来的内容竟然没有图片,好气呦 目录 概述 简介 官方文档 Markdown编 ...
- 第 10 篇：小细节 Markdown 文章自动生成目录，提升阅读体验
目录 在文中插入目录 在页面的任何地方插入目录 处理空目录 美化标题的锚点 URL 作者:HelloGitHub-追梦人物 文中涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 上 ...
- Markdown 介绍
Markdown 是目前互联网上最流行的写作语言,它使用一些简单的符号(* / ` > [] () #)来标记文本格式,其简洁的语法.优美的格式以及强大的软件支持深受广大网友的喜爱.维基百科上对 ...
- markdown从入门到放弃word和PDF
Markdown是一个「轻量级」的「标记语言」. 淡定!!!我知道很多"编外人员"看到这句话之后已经没有兴趣再看下去了. 但是请不要关掉这个页面!!! Markdown很简单!!! ...
- Android Studio利用Gradle删除没有使用到的资源和代码文件
一.打包时忽略无用资源 我们在打包的时候默认会把没有用到的资源(比如图片)也打包成app,徒增了应用的大小.现在我们可以利用Gradle来优雅的去除没有用到的资源文件了! 就是在gradle中配置sh ...
- 一小时学会Markdown写作
写作也是创作一件产品.以易懂.简洁.凝练的方式表达观点.阐述见解和知识,发挥影响力. 为什么要使用 Markdown 博文迁移的排版兼容.当在多个博客之间,或者在线博客与本地笔记软件之间迁移的时候,排 ...
随机推荐
- rabbitmq 使用管理页面向队列中推送消息
参考:https://blog.csdn.net/weixin_43343423/article/details/103382661
- vue3使用swiper 完整步骤
注意: 使用之前请确定使用的swiper版本,避免走一些不必要的弯路(笔者踩过来的)本文采用的是vue3.0.swiper^8.1.0. 1.安装依赖 npm install swiper 2.vue ...
- Typora --Markdown 文本工具
标题: #+空+name 一级 ##+空+name 二级 ###+空+name 三级 ......------六级 (可排版折叠) 字体: 粗体:两边加** 斜体:两边加* 斜体加粗:*** ...
- C#TimeSpan时间差转换成分钟和秒数
public Form1() { InitializeComponent(); aa = DateTime.Now.ToString(); } string aa; private void butt ...
- JDK1.8下载、安装和环境配置教程——
JDK1.8下载.安装和环境配置教程 1.下载安装包 - 浏览器搜索JDK8,如下图: - 点击网页打开后,下拉找到这个: - 根据自己的系统选择正确的进行下载: 例如我的是windows 64位,我 ...
- Vscode，php运行
1.下载好vscode,点击左侧扩展,然后搜索php,安装插件 2.打开小皮面板创建网站 点击确认 创建成功 3.浏览器输入http://myblog验证 4.在vscode打开新建的myblog文件 ...
- 异常（Java）
异常 基本介绍 什么是异常? 在实际工作中,遇到的情况不可能是非常完美.比如:你写的某个模块,用户输入不一定符合你的要求.你的程序要打开某个文件,这个文件可能不存在或者文件格式不对 软件程序在运行过程 ...
- 源代码管理工具：Github
GitHub是一个基于Git的进行版本控制的代码托管网站. Git指的是是一个开放源代码版本控制系统,由Linus Torvalds启动.在时间的累积下,现在的Github是一个最大的开源软件社区.在 ...
- JavaScript常见事件记录
JavaScript常见事件记录 onblur: 元素失去焦点 onfocus: 元素获得焦点 onchange: 用户改变域的内容 onclick: 鼠标点击某个对象 ondblclick: 鼠标双 ...
- 需要改动node_modules，并且别人也可以同步，插件 patch-package
patch-package 转自:https://www.cnblogs.com/lovewhatIlove/p/15724812.html 1.简介:有个功能需要修改node_modules里面的代 ...