利用css 设计markdown 主题
引言
当你不满足一些固定样式的排版，你可以采用css 设计自定义自己的文章排版主题
采用css 设计文章排版
橙心
文章样例：iOS无线真机调试
https://mp.weixin.qq.com/s?__biz=MzI0MjU5MzU5Ng==&mid=2247487498&idx=1&sn=1574855f099883dba0b68e990dddb84d&chksm=e978aa59de0f234f907ff41ce0d958196fe9840531d8dc5de977b1e4191c2f40cb093b95df9c&mpshare=1&scene=1&srcid=0714GUCB72LbYqshBbye1lQ1&sharer_sharetime=1626231721962&sharer_shareid=38c24777c9b84b8b44c56026b3aa9bd7&version=3.1.8.90238&platform=mac#rd 效果：
/* 全局属性
* 页边距 padding: 30px;
* 全文字体 font-family: ptima-Regular;
* 英文换行 word-break: break-all;
*/
#nice {
}
/* 段落，下方未标注标签参数均同此处
* 上边距 margin-top: 5px;
* 下边距 margin-bottom: 5px;
* 行高 line-height: 26px;
* 词间距 word-spacing: 3px;
* 字间距 letter-spacing: 3px;
* 对齐 text-align: left;
* 颜色 color: #3e3e3e;
* 字体大小 font-size: 16px;
* 首行缩进 text-indent: 2em;
*/
#nice p {
}
/* 一级标题 */
#nice h1 {
}
/* 一级标题内容 */
#nice h1 .content {
}
/* 一级标题修饰 请参考有实例的主题 */
#nice h1:after {
}
/* 二级标题 */
#nice h2 {
border-bottom: 2px solid rgb(239, 112, 96);
font-size: 1.3em;
}
/* 二级标题内容 */
#nice h2 .content {
display: inline-block;
font-weight: bold;
background: rgb(239, 112, 96);
color: #ffffff;
padding: 3px 10px 1px;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
margin-right: 3px;
}
/* 二级标题修饰 请参考有实例的主题 */
#nice h2:after {
display: inline-block;
content: " ";
vertical-align: bottom;
border-bottom: 36px solid #efebe9;
border-right: 20px solid transparent;
}
/* 三级标题 */
#nice h3 {
}
/* 三级标题内容 */
#nice h3 .content {
}
/* 三级标题修饰 请参考有实例的主题 */
#nice h3:after {
}
/* 无序列表整体样式
* list-style-type: square|circle|disc;
*/
#nice ul {
}
/* 有序列表整体样式
* list-style-type: upper-roman|lower-greek|lower-alpha;
*/
#nice ol {
}
/* 列表内容，不要设置li
*/
#nice li section {
}
/* 引用
* 左边缘颜色 border-left-color: black;
* 背景色 background: gray;
*/
#nice .multiquote-1 {
border-left-color: rgb(239, 112, 96);
background: #fff9f9;
}
/* 引用文字 */
#nice .multiquote-1 p {
}
/* 链接
* border-bottom: 1px solid #009688;
*/
#nice a {
color: rgb(239, 112, 96);
border-bottom: 1px solid rgb(239, 112, 96);
}
/* 加粗 */
#nice strong {
}
/* 斜体 */
#nice em {
}
/* 加粗斜体 */
#nice em strong {
}
/* 删除线 */
#nice del {
}
/* 分隔线
* 粗细、样式和颜色
* border-top: 1px solid #3e3e3e;
*/
#nice hr {
}
/* 图片
* 宽度 width: 80%;
* 居中 margin: 0 auto;
* 居左 margin: 0 0;
*/
#nice img {
}
/* 图片描述文字 */
#nice figcaption {
}
/* 行内代码 */
#nice p code, #nice li code {
color: rgb(239, 112, 96);
}
/* 非微信代码块
* 代码块不换行 display: -webkit-box !important;
* 代码块换行 display: block;
*/
#nice pre code {
}
/*
* 表格内的单元格
* 字体大小 font-size: 16px;
* 边框 border: 1px solid #ccc;
* 内边距 padding: 5px 10px;
*/
#nice table tr th,
#nice table tr td {
}
/* 脚注文字 */
#nice .footnote-word {
color: #ff3502;
}
/* 脚注上标 */
#nice .footnote-ref {
color: rgb(239, 112, 96);
}
/* "参考资料"四个字
* 内容 content: "参考资料";
*/
#nice .footnotes-sep:before {
}
/* 参考资料编号 */
#nice .footnote-num {
}
/* 参考资料文字 */
#nice .footnote-item p {
}
/* 参考资料解释 */
#nice .footnote-item p em {
}
/* 行间公式
* 最大宽度 max-width: 300% !important;
*/
#nice .block-equation svg {
}
/* 行内公式
*/
#nice .inline-equation svg {
}
极客黑
/*自定义样式，实时生效*/
/* 全局属性
* 页边距 padding: 30px;
* 全文字体 font-family: ptima-Regular;
* 英文换行 word-break: break-all;
*/
#nice {
}
/* 段落，下方未标注标签参数均同此处
* 上边距 margin-top: 5px;
* 下边距 margin-bottom: 5px;
* 行高 line-height: 26px;
* 词间距 word-spacing: 3px;
* 字间距 letter-spacing: 3px;
* 对齐 text-align: left;
* 颜色 color: #3e3e3e;
* 字体大小 font-size: 16px;
* 首行缩进 text-indent: 2em;
*/
#nice p {
box-sizing: border-box;
margin-bottom: 16px;
font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
font-size: 15px;
text-align: start;
white-space: normal;
text-size-adjust: auto;
line-height: 1.75em;
}
/* 一级标题 */
#nice h1 {
margin-top: -0.46em;
margin-bottom: 0.1em;
border-bottom: 2px solid rgb(198, 196, 196);
box-sizing: border-box;
}
/* 一级标题内容 */
#nice h1 .content {
padding-top: 5px;
padding-bottom: 5px;
color: rgb(160, 160, 160);
font-size: 13px;
line-height: 2;
box-sizing: border-box;
}
/* 一级标题修饰 请参考有实例的主题 */
#nice h1:after {
}
/* 二级标题 */
#nice h2 {
margin: 10px auto;
height: 40px;
background-color: rgb(251, 251, 251);
border-bottom: 1px solid rgb(246, 246, 246);
overflow: hidden;
box-sizing: border-box;
}
/* 二级标题内容 */
#nice h2 .content {
margin-left: -10px;
display: inline-block;
width: auto;
height: 40px;
background-color: rgb(33, 33, 34);
border-bottom-right-radius:100px;
color: rgb(255, 255, 255);
padding-right: 30px;
padding-left: 30px;
line-height: 40px;
font-size: 16px;
}
/* 二级标题修饰 请参考有实例的主题 */
#nice h2:after {
}
/* 三级标题 */
#nice h3 {
margin: 20px auto 5px;
border-top: 1px solid rgb(221, 221, 221);
box-sizing: border-box;
}
/* 三级标题内容 */
#nice h3 .content {
margin-top: -1px;
padding-top: 6px;
padding-right: 5px;
padding-left: 5px;
font-size: 17px;
border-top: 2px solid rgb(33, 33, 34);
display: inline-block;
line-height: 1.1;
}
/* 三级标题修饰 请参考有实例的主题 */
#nice h3:after {
}
#nice h4 {
margin: 10px auto -1px;
border-top: 1px solid rgb(221, 221, 221);
box-sizing: border-box;
}
#nice h4 .content {
margin-top: -1px;
padding-top: 6px;
padding-right: 5px;
padding-left: 5px;
font-size: 16px;
border-top: 2px solid rgb(33, 33, 34);
display: inline-block;
line-height: 1.1;
}
/* 无序列表整体样式
* list-style-type: square|circle|disc;
*/
#nice ul {
}
/* 有序列表整体样式
* list-style-type: upper-roman|lower-greek|lower-alpha;
*/
#nice ol {
}
/* 列表内容，不要设置li
*/
#nice li section {
font-size: 15px;
font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
}
/* 引用
* 左边缘颜色 border-left-color: black;
* 背景色 background: gray;
*/
#nice .multiquote-1 {
border-left-color: rgb(221, 221, 221);
margin-top: 1.2em;
margin-bottom: 1.2em;
padding-right: 1em;
padding-left: 1em;
border-left-width: 4px;
color: rgb(119, 119, 119);
quotes: none;
}
/* 引用文字 */
#nice .multiquote-1 p {
font-size: 15px;
font-family: -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;
color: rgb(119, 119, 119);
line-height: 1.75em;
}
/* 链接
* border-bottom: 1px solid #009688;
*/
#nice a {
color: rgb(239, 112, 96);
border-bottom: 1px solid rgb(239, 112, 96);
}
/* 加粗 */
#nice strong {
}
/* 斜体 */
#nice em {
}
/* 加粗斜体 */
#nice em strong {
}
/* 删除线 */
#nice del {
}
/* 分隔线
* 粗细、样式和颜色
* border-top: 1px solid #3e3e3e;
*/
#nice hr {
}
/* 图片
* 宽度 width: 80%;
* 居中 margin: 0 auto;
* 居左 margin: 0 0;
*/
#nice img {
}
/* 图片描述文字 */
#nice figcaption {
}
/* 行内代码 */
#nice p code, #nice li code {
color: rgb(239, 112, 96);
}
/* 非微信代码块
* 代码块不换行 display: -webkit-box !important;
* 代码块换行 display: block;
*/
#nice pre code {
}
/*
* 表格内的单元格
* 字体大小 font-size: 16px;
* 边框 border: 1px solid #ccc;
* 内边距 padding: 5px 10px;
*/
#nice table tr th,
#nice table tr td {
}
/* 脚注文字 */
#nice .footnote-word {
color: #ff3502;
}
/* 脚注上标 */
#nice .footnote-ref {
color: rgb(239, 112, 96);
}
/* "参考资料"四个字
* 内容 content: "参考资料";
*/
#nice .footnotes-sep:before {
}
/* 参考资料编号 */
#nice .footnote-num {
}
/* 参考资料文字 */
#nice .footnote-item p {
}
/* 参考资料解释 */
#nice .footnote-item p em {
}
/* 行间公式
* 最大宽度 max-width: 300% !important;
*/
#nice .block-equation svg {
}
/* 行内公式
*/
#nice .inline-equation svg {
}
锤子便签主题
本文就是采用便签主题
想要对应的CSS代码，可点击原文，或者关注公众号：iOS逆向，添加我微信。
see also
Markdown 入门 :文章目录生成、合并单元格、文章快速插入链接（使用剪切板的链接插到选中文字）【修订】
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2021-07-15，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
卡证文字识别
卡证文字识别（Card Optical Character Recognition，Card OCR）基于行业前沿的深度学习技术，提供身份证识别、银行卡识别、名片识别、营业执照识别等多种服务，支持将图片上的文字内容，智能识别为结构化的文本，可应用于用户注册、银行开户、交通出行、政务办事等多种场景，大幅提升信息处理效率。