Markdown样式自定义及详解-博客园、Typora、Markdown Nice

背景说明

对于技术写作，经常需要同步到多个平台，这就需要样式不受平台限制。最好一次写作排版，多平台发布。虽然网上存在在线编辑器，但是对于不开源的平台，意味着平台关闭后便无法排版。而持久的技术博客写作，就需要一个开源或离线平台来进行文档的编辑和排版。
Markdown 是一种轻量级标记语言，允许人们使用易读易写的纯文本格式编写文档，在 2004 由约翰·格鲁伯（John Gruber）创建。广泛应用于博客文章（简书、CSDN、博客园）、微信公众号文章、项目文档、书籍、笔记（印象笔记、有道云笔记、熊掌记）、邮件、在线协作文档（腾讯文档、石墨文档）、交互式文档、搭建个人博客等众多写作场景。
提到标记语言，就不得不说明一下 Web 技术的基础，Web 技术的基础为 HTML 、 CSS 、 HTTP 。 HTML（HyperText Markup Language，超文本标记语言）用于描述、定义页面内容。 CSS（Cascading Style Sheets，层叠样式表）用于描述页面内容的外观与展示。HTTP（Hypertext Transfer Protocol，超文本传输协议）用于传输网页中的 HTML 及其他超媒体文档。其思想就是把页面内容、页面样式、页面传输进行分离。
Markdown 是一种轻量级标记语言，语法简单易学，采用 CSS 进行样式渲染。因此，要更改样式，就需要更改 CSS，而要更改 CSS，就需要先了解 HTML。Markdown 语法对应于 HTML 标签子集，因此，只需要了解 Markdown 的 CSS 对应的 HTML 标签即可自由的配置 CSS。
网上存在 Markdown 格式化工具网站，例如 Md2All、Markdown Nice、可能吧公众号 Style 等。但也有缺点，一旦断网，便无法使用。而自定义 CSS，就可以做到所见即所得，自由掌握在自己手中。网上大多数教程一般针对于业内人员，门槛较高，而对于外行人员，进行详细学习成本较高。因此，此文对 Markdown 所涉及到的 HTML 和 CSS 内容进行简要的说明介绍，既是对自己学习过程的记录，也是对外行入门的引导。

网页介绍

HTML

定义了网页内容的含义和结构。仅列举 Markdown 中的部分元素，详细内容可参考HTML 参考手册

标题

标签	描述
`<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`	六个不同级别的标题，`<h1>`级别最高，而 `<h6>`级别最低
`<hr>`	段落级元素间的主题转换,表现为水平线

格式

标签	描述
`<p>`	定义一个段落
`<b>`	大多数浏览器将文字显示为粗体
`<blockquote>`	块级引用元素，代表其中的文字是引用内容。
`<code>`	呈现一段计算机代码。
`<em>`	标记出需要用户着重阅读的内容，定义强调文本。
`<i>`	定义斜体文本
`<kbd>`	定义键盘文本
`<mark>`	定义带有记号的文本
`<pre>`	表示预定义格式文本。元素中的文本按照原文件的编排。
`<q>`	表示一个封闭的并且是短的行内引用的文本
`<s>`	定义加删除线的文本
`<u>`	定义下划线文本
`<strong>`	定义语气更为强烈的强调文本
`<sub>`	定义下标文本
`<sup>`	定义上标文本
`<time>`	定义一个日期/时间

图像

标签	描述
`<img>`	定义图像

链接

标签	描述
`<a>`	定义一个链接

列表

标签	描述
`<ul>`	定义一个无序列表
`<ol>`	定义一个有序列表
`<li>`	表示列表里的项目。必须包含在一个父元素里，如有序或无序列表
`<dl>`	定义一个定义列表
`<dt>`	定义一个定义定义列表中的项目
`<dd>`	定义定义列表中项目的描述,必须跟着一个 `<dt>` 元素

表格

元素	描述
`<table>`	定义一个表格
`<caption>`	定义表格标题
`<th>`	定义表格中的表头单元格
`<tr>`	定义表格中的行
`<td>`	定义表格中的单元
`<thead>`	定义表格中的表头内容
`<tbody>`	定义表格中的主体内容
`<tfoot>`	定义表格中的表注内容（脚注）
`<col>`	定义表格中一个或多个列的属性值
`<colgroup>`	定义表格中供格式化的列组

CSS

仅列举 Markdown 中的部分属性，详细内容可参考CSS 参考手册

CSS 章节概述

章	节
CSS 基础教程	CSS 简介、CSS 基础语法、CSS 高级语法、CSS 派生选择器、CSS id 选择器、CSS 类选择器、CSS 属性选择器、CSS 创建
CSS 样式	CSS 背景、CSS 文本、CSS 字体、CSS 链接、CSS 列表、CSS 表格、CSS 轮廓
CSS 框模型	CSS 框模型概述、CSS 内边距、CSS 边框、CSS 外边距、CSS 外边距合并
CSS 定位	CSS 定位概述、CSS 相对定位、CSS 绝对定位、CSS 浮动
CSS 选择器	CSS 元素选择器、CSS 选择器分组、CSS 类选择器详解、CSS ID 选择器详解、CSS 属性选择器详解、CSS 后代选择器、CSS 子元素选择器、CSS 相邻兄弟选择器、CSS 伪类、CSS 伪元素
CSS 高级	CSS 对齐、CSS 尺寸、CSS 分类、CSS 导航栏、CSS 图片库、CSS 图片透明、CSS 媒介类型、CSS 注意事项、CSS 总结
CSS 参考手册	CSS 参考手册、CSS 选择器、CSS 听觉参考手册、CSS 网络安全字体、CSS 单位、CSS 颜色、CSS 颜色值、CSS 颜色名、CSS 颜色十六进

CSS 选择器

选择器	例子	例子描述
element	p	选择所有 `<p>` 元素
element,element	div,p	选择所有 `<div>` 元素和所有 `<p>` 元素
element element	div p	选择 `<div>` 元素内部的所有 `<p>` 元素
element>element	div>p	选择父元素为 `<div>` 元素的所有 `<p>` 元素
element+element	div+p	选择紧接在 `<div>` 元素之后的所有 `<p>` 元素
element1~element2	p~ul	选择前面有 `<p>` 元素的每个 `<ul>` 元素
:hover	a:hover	选择鼠标指针位于其上的链接
:before	p:before	在每个 `<p>` 元素的内容之前插入内容
:after	p:after	在每个 `<p>` 元素的内容之后插入内容
:first-of-type	p:first-of-type	选择属于其父元素的首个 `<p>` 元素的每个 `<p>` 元素
:last-of-type	p:last-of-type	选择属于其父元素的最后 `<p>` 元素的每个 `<p>` 元素
:only-child	p:only-child	选择属于其父元素的唯一子元素的每个 `<p>` 元素
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每个 `<p>` 元素

CSS 样式

CSS 边框属性

属性	描述
border	设置所有的边框属性
border-bottom	设置所有的下边框属性
border-bottom-color	设置下边框的颜色
border-bottom-style	设置下边框的样式
border-bottom-width	设置下边框的宽度
border-color	设置四条边框的颜色
border-left	设置所有的左边框属性
border-right	设置所有的右边框属性
border-top	设置所有的上边框属性
outline	设置所有的轮廓属性
border-bottom-left-radius	定义边框左下角的形状
border-radius	设置边框四个角的属性

Box 属性

属性	描述
overflow-x	如果内容溢出了元素内容区域，是否对内容的左/右边缘进行裁剪
overflow-y	如果内容溢出了元素内容区域，是否对内容的上/下边缘进行裁剪
overflow-style	规定溢出元素的首选滚动方法

CSS 字体属性

属性	描述
font	规定字体属性
font-family	规定文本的字体系列
font-size	规定文本的字体尺寸
font-style	规定文本的字体样式
font-weight	规定字体的粗细

CSS 列表属性

属性	描述
list-style	设置所有的列表属性
list-style-image	将图象设置为列表项标记
list-style-position	设置列表项标记的放置位置
list-style-type	设置列表项标记的类型

CSS 外边距属性

属性	描述
margin	设置所有外边距属性
margin-bottom	设置元素的下外边距
margin-left	设置元素的左外边距
margin-right	设置元素的右外边距
margin-top	设置元素的上外边距

CSS 内边距属性

同 CSS 外边距属性。

CSS 定位属性

属性	描述
display	规定元素应该生成的框的类型
overflow	规定当内容溢出元素框时发生的事情

CSS 文本属性

属性	描述
color	设置文本的颜色
letter-spacing	设置字符间距
line-height	设置行高
text-align	规定文本的水平对齐方式
text-indent	规定文本块首行的缩进
white-space	规定如何处理元素中的空白
word-spacing	设置单词间距
text-align-last	设置如何对齐最后一行或紧挨着强制换行符之前的行
text-outline	规定文本的轮廓
text-overflow	规定当文本溢出包含元素时发生的事情
text-wrap	规定文本的换行规则
word-break	规定非中日韩文本的换行规则
word-wrap	允许对长的不可分割的单词进行分割并换行到下一行

CSS 框模型

CSS 框模型概述

CSS 单位

单位	描述
%	百分比
in	英寸
cm	厘米
mm	毫米
em	相对于当前字体的倍数
pt	磅 (1 pt 等于 1/72 英寸)
px	像素 (计算机屏幕上的一个点)

CSS 颜色

颜色名	描述
rgb(x,x,x)	RGB 值，如 rgb(255,0,0)
rgb(x%, x%, x%)	RGB 百分比值，如 rgb(100%,0%,0%)
#rrggbb	十六进制数，如 #ff0000

HTML 和 CSS 颜色规范中定义了 147 中颜色名（17 种标准颜色加 130 种其他颜色）。
17 种标准色是 aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow。

样式配置

样式使用说明

样式为多平台通用样式，只需要批量替换祖先选择器就可以迁移到不同的平台
因为每个元素都使用了选择器，因此不会影响界面的正常显示

样式具体代码

/********************************************
---
    标题: Markdown CSS 自定义及注解.css
    作者: 梦幻之心星    ky-seeker@qq.com
    标签: [Markdown,CSS,博客园,Typora,Markdown_Nice,Markdown_Here]
    目录: [Markdown]
    日期: 2021-1-3
    版本：V1.6
    说明：
      - 祖先选择器：使用祖先选择器，使样式仅适用于特定平台，而不会影响其他平台和控件组件
          - Typora：[#write]
          - Markdown_Nice：[#nice]
          - Markdown_Here：[.markdown-here-wrapper]
          - 博客园：[#cnblogs_post_body]
      - 博客园:皮肤为CodingLife
      - Typora:主题文件夹下创建的“base.user.css”应用于所有主题，"{theme-css-name}.user.css"仅应用于相应主题。
      - markdown_here:不支持[::before]和[::after]，需要将前缀和后缀合并到本体中。

---
********************************************/

/********************************************
******全局属性
******代码
******段落格式
******链接
******图片
******引用
******列表
******定义列表
******任务列表
******目录
******表格
******标题
******数学公式
******画图
********************************************/

/*================代码开始=============*/

#cnblogs_post_body pre {
  line-height: 1.2em;
}

#cnblogs_post_body pre,
#cnblogs_post_body code {
  font-family: Consolas, Inconsolata, Courier, monospace;
}

/*代码整体样式*/

#cnblogs_post_body code {
  font-size: 14px;
  margin: 0 0.15em;
  padding: 2px 4px;
  border: 1px solid #eaeaea;
  /*圆角框*/
  border-radius: 3px;
  background: #eff2f3 !important;
}

/*代码块*/

#cnblogs_post_body pre code {
  white-space: pre;
  /*如果内容被修剪，显示滚动条以便查看其余内容。*/
  overflow: auto-flow;
  padding: 0.5em 0.7em;
  display: block !important;
}

/* 行内代码、列表内代码 */

#cnblogs_post_body p code,
#cnblogs_post_body li code {
  font-size: 14px !important;
  color: #3594f7 !important;
  padding: 0 2px;
  display: inline;
}

/*================代码结束=============*/

/*================段落格式开始=============*/

/********暂无：下标、上标、高亮、脚注********/

/*段落*/

#cnblogs_post_body p {
  color: #595959;
  padding-top: 1px !important;
  padding-bottom: 1px !important;
  /*字间距*/
  letter-spacing: 0px;
  font-size: 16px;
  /*词间距*/
  word-spacing: 0px;
  /*首行缩进*/
  text-indent: 0em;
  /*文本对齐 */
  text-align: justify;
  /* 空白字符的显示 */
  white-space: pre-wrap !important;
  /* 长度超过一行的单词换行方法  */
  word-wrap: break-word !important;
  /* 非中日韩单词换行方法 */
  word-break: break-all !important;
}

/* 加粗 */

#cnblogs_post_body strong {
  font-weight: bold;
  color: #3594f7 !important;
}

#cnblogs_post_body strong::before {
  content: "「";
}

#cnblogs_post_body strong::after {
  content: "」";
}

/* 斜体 */

#cnblogs_post_body em {
  font-style: italic;
  color: #3594f7 !important;
}

#cnblogs_post_body em::before {
  content: "『";
}

#cnblogs_post_body em::after {
  content: "』";
}

#cnblogs_post_body strong em::before,
#cnblogs_post_body em strong::before {
  content: none;
}

#cnblogs_post_body strong em::after,
#cnblogs_post_body em strong::after {
  content: none;
}

/* 删除线 */

#cnblogs_post_body s {
  font-style: italic;
  color: red !important;
}

/*水平分隔线*/

#cnblogs_post_body hr {
  /*元素的高度*/
  height: 1px;
  /*外边距*/
  margin: 1em 0px;
  /*内边距*/
  padding: 0;
  /*边框*/
  border: none;
  border-top: 2px solid #3baafa !important;
}

#cnblogs_post_body kbd {
  font-family: monospace;
  background-color: #ebdfdf !important;
  border: 1px solid #ccc !important;
  border-radius: 5px;
  padding: 1px 5px;
}

#cnblogs_post_body video {
  width: auto;
  height: auto;
  border: 1px solid #3baafa;
  object-position: center center;
  object-fit: contain;
  margin: 0;
  padding: 0;
  display: block;
}

/*================段落格式结束=============*/

/*================链接开始=============*/

/*超链接*/

#cnblogs_post_body a {
  text-decoration: underline;
  font-size: 16px;
  /*[normal|break-word]*/
  word-wrap: break-word;
  color: #1890ff !important;
  /*[normal|bold]*/
  font-weight: normal;
  border-bottom: none;
}

/*================链接结束=============*/

/*================图片开始=============*/

/*图片*/

#cnblogs_post_body img {
  display: block;
  margin: 5px;
  /*图片边框圆角化*/
  border-radius: 6px;
  /*图片自动缩放*/
  object-fit: contain;
  /*图片外边框阴影化*/
  box-shadow: 2px 2px 7px #999;
}

/* 图片描述文字 仅Markdown_Nice支持 */

#cnblogs_post_body figcaption {
  margin-top: 10px;
  /*块级元素，此元素前后会带有换行符*/
  display: block;
  text-align: center;
  color: #999;
  font-size: 13px;
}

/*图片描述文字之前  仅Markdown_Nice支持 */

#cnblogs_post_body figcaption:before {
  content: "";
  background-image: url(https://ico.skyseeker.eu.org/MarkDown_CSS-img_fig_before.png);
  /*行内块元素*/
  display: inline-block;
  width: 18px;
  height: 18px;
  background-size: 18px;
  /*背景图像不会重复*/
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 5px;
  margin-bottom: -5px;
}

/*================图片结束=============*/

/*================引用开始=============*/

/*引用块*/

#cnblogs_post_body blockquote {
  text-align: left;
  border-left: 3px solid #00000066 !important;
  background: RGBA(0, 0, 0, 0.05) !important;
  display: block;
  margin: 0;
  padding: 2px 5px !important;
}

/*引用块的文字内容*/

#cnblogs_post_body blockquote p {
  color: #777;
  /*首行缩进*/
  text-indent: 0em;
}

#cnblogs_post_body q {
  border-left: 6px solid #ddd;
  padding: 0 1em;
  color: #777;
  quotes: none;
}

/*================引用结束=============*/

/*================列表开始=============*/

/* 列表中的项目样式：包括无序前缀点、有序前缀数、列表内容*/

#cnblogs_post_body li,
#cnblogs_post_body li p {
  font-size: 15px;
  font-weight: normal;
  color: #595959;
  margin: 0;
}

#cnblogs_post_body ul,
#cnblogs_post_body ol {
  font-size: 15px;
  color: #595959;
  margin-left: 0px;
  margin-bottom: 0.1em;
  padding-left: 3em;
}

#cnblogs_post_body ul ul,
#cnblogs_post_body ol ul,
#cnblogs_post_body ul ol,
#cnblogs_post_body ol ol {
  padding-left: 1.5em;
}

#cnblogs_post_body blockquote ol,
#cnblogs_post_body blockquote ul {
  padding-left: 1.5em;
}

/* 有序列表--一级列表前缀数字样式 Markdown Nice*/

#cnblogs_post_body ol li {
  list-style-type: decimal;
  /*[decimal|upper-roman|lower-alpha]*/
}

/* 有序列表--二级列表前缀数字样式*/

#cnblogs_post_body ol ol li,
#cnblogs_post_body ul ol li {
  list-style-type: lower-roman;
}

/*================列表结束=============*/

/*================定义列表开始=============*/

/* 定义一个定义列表 */

#cnblogs_post_body dl {
  padding: 0;
}

/* 定义一个定义定义列表中的项目 */

#cnblogs_post_body dl dt {
  font-size: 1em;
  font-weight: bold;
  font-style: italic;
}

/* 定义定义列表中项目的描述 */

#cnblogs_post_body dl dd {
  margin: 0 0 1em;
  padding: 0 1em;
}

/*================定义列表结束=============*/

/*================任务列表开始=============*/

/*================任务列表结束=============*/

/*================目录开始=============*/

/*================目录结束=============*/

/*================表格开始=============*/

/* 定义一个表格 */

#cnblogs_post_body table {
  border-collapse: collapse;
  display: table !important;
  width: -webkit-fill-available;
}

/* 定义表格的行 */

#cnblogs_post_body table tr {
  background-color: white;
  margin: 0;
  padding: 0;
}

/* 表格的表头 */

#cnblogs_post_body th {
  border: 2px solid #ccc !important;
  font-weight: bold;
  background-color: #f0f0f0;
  font-size: 16px;
  padding: 5px 10px;
}

/* 表格的主体内容 */

#cnblogs_post_body tbody {
  margin: 10;
  padding: 0;
}

/* 表格主体内容单元 */

#cnblogs_post_body tr td {
  border: 1px solid #ccc;
  font-size: 16px;
  color: #595959;
  padding: 5px 10px;
}

/*隔行改变行的背景色*/

#cnblogs_post_body table tr:nth-child(2n) {
  background-color: #f8f8f8;
}

/*================表格结束=============*/

/*================标题开始=============*/

#cnblogs_post_body h1,
#cnblogs_post_body h2,
#cnblogs_post_body h3,
#cnblogs_post_body h4,
#cnblogs_post_body h5,
#cnblogs_post_body h6 {
  margin-top: 20px;
  margin-bottom: 15px;
  padding: 0px;
  font-weight: bold;
}

/* 一级标题 */

#cnblogs_post_body h1 {
  display: block;
  font-size: 24px;
  text-align: left;
  color: #40b8fa;
  line-height: 1.5;
  /* 一级标题文字内容之前 h1 ::before  */
  padding-left: 45px !important;
  background-image: url(https://ico.skyseeker.eu.org/MarkDown_CSS-h1_before.png);
  background-size: 40px;
  background-repeat: no-repeat;
  background-position: center left;
}

/* 二级标题 */

#cnblogs_post_body h2 {
  display: block;
  border-bottom: 3px solid #40b8fa;
  font-size: 22px;
  color: #40b8fa !important;
  /*相对定位元素的定位是相对其正常位置。*/
  /*  position: relative;*/
  /* 二级标题文字内容之前 h2 ::before  */
  padding-left: 40px !important;
  background-image: url(https://ico.skyseeker.eu.org/MarkDown_CSS-h2_before.png);
  background-size: 35px;
  background-repeat: no-repeat;
  background-position: center left;
  /* 二级标题 前缀 将 [#nice_h2 .prefix ] 中的[.prefix]替换为[::before]
    /* 二级标题 前缀 将 [#nice_h2 .suffix ] 中的[.prefix]替换为[::after] */
  /* 
    content: "";    
    background-image: url();
    background-size: 20px;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-left: 6px;
    margin-right: 6px;
    margin-bottom: -4px;
  */
}

/* 三级标题 */

#cnblogs_post_body h3 {
  font-size: 20px;
  font-weight: bold;
  width: fit-content;
  border-bottom: 2px solid RGBA(79, 177, 249, 0.65);
  color: #40b8fa !important;
  /*三级标题文字内容之前 h3 ::before */
  padding-left: 30px !important;
  background-image: url(https://ico.skyseeker.eu.org/MarkDown_CSS-h3_before.png);
  background-size: 25px;
  background-repeat: no-repeat;
  background-position: center left;
}

/* 四级标题*/

#cnblogs_post_body h4 {
  font-size: 18px;
  /* 四级标题文字内容之前 h4::before */
  padding-left: 30px !important;
  background-image: url(https://ico.skyseeker.eu.org/MarkDown_CSS-h4_before.png);
  background-size: 25px;
  background-position: left;
  background-repeat: no-repeat;
  background-position: center left;
}

/* 五级标题 */

#cnblogs_post_body h5 {
  font-size: 16px;
  /* 五级标题文字内容之前 h4::before */
  padding-left: 20px !important;
  background-image: url(https://ico.skyseeker.eu.org/MarkDown_CSS-h5_before.png);
  background-size: 15px;
  background-position: left;
  background-repeat: no-repeat;
  background-position: center left;
}

/* 六级标题*/

#cnblogs_post_body h6 {
  font-size: 16px;
}

/*================标题结束=============*/

参考资料

博客园地址：https://www.cnblogs.com/Sky-seeker
微信公众号：关注微信公众号，获取即时推送

posted @ 2021-01-13 11:33 梦幻之心星阅读(8979) 评论(2) 编辑收藏举报

刷新页面返回顶部

梦幻之心星

博学之，审问之，慎思之，明辨之，笃行之。

Markdown样式自定义及详解-博客园、Typora、Markdown Nice

背景说明

网页介绍

HTML

标题

格式

图像

链接

列表

表格

CSS

CSS 章节概述

CSS 选择器

CSS 样式

CSS 边框属性

Box 属性

CSS 字体属性

CSS 列表属性

CSS 外边距属性

CSS 内边距属性

CSS 定位属性

CSS 文本属性

CSS 框模型

CSS 单位

CSS 颜色

样式配置

样式使用说明

样式具体代码

参考资料

公告