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进行优雅排版的更多相关文章

  1. 【springboot】之利用shell脚本优雅启动,关闭springboot服务

    springbot开发api接口服务,生产环境中一般都是运行独立的jar,在部署过程中涉及到服务的优雅启动,关闭, springboot官方文档给出的有两种方式, 1.使用http shutdown ...

  2. 利用Lombok编写优雅的spring依赖注入代码,去掉繁人的@Autowired

    大家平时使用spring依赖注入,都是怎么写的? @Servicepublic class OrderService {@Autowiredprivate UserService userServic ...

  3. 玩转公众号markdown排版

    Md2All 简介 Markdown排版利器,支持 "一键排版" 的样式模板选择,支持"css样式自定义",支持80多种代码高亮. 能让Markdown内容,无 ...

  4. [转]有道云笔记markdown

    作为半个文字工作者,一天当中,一半时间用在遣词造句,一半时间则在死磕排版.当听说“前所未有的极简语法”Markdown,不仅能简化排版.大大提高书写效率,而且上手零门槛.好奇宝宝怎么忍得住一颗蠢蠢欲动 ...

  5. Markdown的入门教程,非常的使用

    原文链接: https://www.jianshu.com/p/20e82ddb37cb 链接地址  点我      粘贴进来的内容竟然没有图片,好气呦 目录 概述 简介 官方文档 Markdown编 ...

  6. 第 10 篇:小细节 Markdown 文章自动生成目录,提升阅读体验

    目录 在文中插入目录 在页面的任何地方插入目录 处理空目录 美化标题的锚点 URL 作者:HelloGitHub-追梦人物 文中涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 上 ...

  7. Markdown 介绍

    Markdown 是目前互联网上最流行的写作语言,它使用一些简单的符号(* / ` > [] () #)来标记文本格式,其简洁的语法.优美的格式以及强大的软件支持深受广大网友的喜爱.维基百科上对 ...

  8. markdown从入门到放弃word和PDF

    Markdown是一个「轻量级」的「标记语言」. 淡定!!!我知道很多"编外人员"看到这句话之后已经没有兴趣再看下去了. 但是请不要关掉这个页面!!! Markdown很简单!!! ...

  9. Android Studio利用Gradle删除没有使用到的资源和代码文件

    一.打包时忽略无用资源 我们在打包的时候默认会把没有用到的资源(比如图片)也打包成app,徒增了应用的大小.现在我们可以利用Gradle来优雅的去除没有用到的资源文件了! 就是在gradle中配置sh ...

  10. 一小时学会Markdown写作

    写作也是创作一件产品.以易懂.简洁.凝练的方式表达观点.阐述见解和知识,发挥影响力. 为什么要使用 Markdown 博文迁移的排版兼容.当在多个博客之间,或者在线博客与本地笔记软件之间迁移的时候,排 ...

随机推荐

  1. 【Java】zuul

    报错 com.netflix.zuul.exception.ZuulException: Hystrix Readed time out 解决办法,zuul模块的yml配置文件增加 ribbon: C ...

  2. 【Java】生成随机字符串

    package com.runsky.utils; import java.util.Random; public class GetRandom { private static final Str ...

  3. Taro 弹窗阻止小程序滑动穿透(亲测有效) tabbar数据缓存不更新 入口场景值不同

    v3.0 推出后反馈最多的问题之一,就是在 touchmove 事件回调中调用 e.stopPropagation() 并不能阻止滑动穿透. 这是因为 Taro 3 的事件冒泡机制是单独在小程序逻辑层 ...

  4. 点击div实现选中效果

    先上一份效果图.原来的checked多选框还是存在的,我只不过隐藏了,让他的整个div的范围都是可以点击的,右上角三个点是可以删除当前元素,左下角的播放按钮可以点击播放语音,主要是利用z-index把 ...

  5. 使用jquery+layui 做一个输入搜索下拉 类似lay-search

    效  果: 因为需要做一个搜索出现下拉然后点击 自动填装input 内容的 东西. 一开始使用lay-search 的控件去弄. 但是无法控制里面的内容.所以用了一些笨方法去弄 废话不说了, html ...

  6. mac中chrome常用快捷键

     1.标签页和窗口快捷键  ⌘-N                                                                  打开新窗口.   ⌘-T      ...

  7. 上分准备 VP Codeforces Round #762 (Div. 3) 4题ABCE

    +00:02 +00:16 +01:08   +02:07 VP 情况  4/8 ABCE ,赛时排名可以到823,什么时候我可以上个青 B 本想写个map的二分的,发现自己不会,写了个普普通通的二分 ...

  8. Vue Element使用第三方图标(iconfont阿里矢量图标库)

    在  www.iconfont.cn 中搜索图标并加入购物车然后添加至项目,编辑项目名称 然后将项目下载至本地解压后将如下文件复制移到到  src/assets/icon中, 并把iconfont.c ...

  9. 学习JavaScript第三周

    字符串的遍历,字符串虽是简单数据类型却有对应的属性和方法,这是因为字符串是包装类型(当然布尔类型和数字类型也是包装类型),临时具有对象的属性和方法,在使用完后就会释放对象. 简单的淡入淡出的轮播图,原 ...

  10. 12.21linux学习第二十天

    今天老刘讲最后一章,第20章使用LNMP架构部署动态网站环境.定制安装17个安装包,编译安装要花很长时间,需要漫长的等待. LNMP动态网站部署架构是一套由Linux + Nginx + MySQL ...