AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

利用css 设计markdown 主题

2022-01-12 465
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 利用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


效果：

image.png

/* 全局属性
 * 页边距 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 {  
}

极客黑

文章样例：iOS OCR 之身份证识别 (正反面)

https://mp.weixin.qq.com/s?__biz=MzI0MjU5MzU5Ng==&mid=2247487540&idx=1&sn=1f711bcdd36c6aa692cf4b4b66c3b236&chksm=e978aa67de0f237175167f3d7a6aaed710f3b646272d877438af8de85f01b2d3e98e504f52cc&mpshare=1&scene=1&srcid=0714DJ9bfEdR5Hesg8diMZiE&sharer_sharetime=1626231459308&sharer_shareid=38c24777c9b84b8b44c56026b3aa9bd7&version=3.1.8.90238&platform=mac#rd

image.png

/*自定义样式，实时生效*/
/* 全局属性
 * 页边距 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 {  
}

锤子便签主题

本文就是采用便签主题

image.png

see also

Markdown 入门 :文章目录生成、合并单元格、文章快速插入链接（使用剪切板的链接插到选中文字）【修订】

https://mp.weixin.qq.com/s?__biz=MzI0MjU5MzU5Ng==&mid=2247487438&idx=6&sn=d43e4154060b527c1b4b6948b5d1b4c8&chksm=e978b59dde0f3c8b7000aea619244f355fc8f6995d17531e50f5016752d81abc50bf738bcb5e&mpshare=1&scene=1&srcid=0714yHwEgFH95KyZLvYDxSZS&sharer_sharetime=1626231849897&sharer_shareid=38c24777c9b84b8b44c56026b3aa9bd7&version=3.1.8.90238&platform=mac#rd

文章标签：
前端开发
iOS开发
文字识别
关键词：
CSS主题
CSS设计
CSS markdown
iOS逆向
目录
相关文章
狂奔滴小马
|
前端开发 JavaScript
使用 CSS variables 和Tailwind css实现主题换肤
最近在网上看到 Tailwind Labs的实现的[换肤视频]，决定使用 Tailwind css 实现博客列表主题换肤。
狂奔滴小马
1286 0
土木林森
|
6月前
|
前端开发 JavaScript 安全
【亮剑】探讨了在React TypeScript应用中如何通过道具(props)传递CSS样式，以实现模块化、主题化和动态样式
【4月更文挑战第30天】本文探讨了在React TypeScript应用中如何通过道具(props)传递CSS样式，以实现模块化、主题化和动态样式。文章分为三部分：首先解释了样式传递的必要性，包括模块化、主题化和动态样式以及TypeScript集成。接着介绍了内联样式的基本用法和最佳实践，展示了一个使用内联样式自定义按钮颜色的例子。最后，讨论了使用CSS模块和TypeScript接口处理复杂样式的方案，强调了它们在组织和重用样式方面的优势。结合TypeScript，确保了样式的正确性和可维护性，为开发者提供了灵活的样式管理策略。
土木林森
75 0
海拥
|
11月前
|
存储 前端开发 JavaScript
🏆使用 HTML、CSS 和 JavaScript 的酷黑主题模拟时钟
🏆使用 HTML、CSS 和 JavaScript 的酷黑主题模拟时钟
海拥
119 0
程序猿追
|
前端开发
侧边导航栏（抽屉式设计）界面 (html + css)
写在前面 哈喽~大家好，这篇呢带来的是侧边导航栏（抽屉式设计），采用 (html + css) 来实现的，编辑器是 WebStorm 。接下来来看看效果吧。
程序猿追
1091 0
侧边导航栏（抽屉式设计）界面 (html + css)
掘金防诈骗集团CEO
|
前端开发 程序员
CSS实现虚拟变化主题键盘
CSS实现虚拟变化主题键盘
掘金防诈骗集团CEO
83 0
命运之光
|
前端开发
纯HTML+CSS网页设计期末作业（海贼王主题网站——图片可换，主题可换）
大一web课结课大作业分享
命运之光
354 0
凯小默
|
前端开发 JavaScript
html + css + js 怎么实现主题样式的切换？
html + css + js 怎么实现主题样式的切换？
凯小默
187 0
html + css + js 怎么实现主题样式的切换？
SouthernWind
|
存储 前端开发
vue3通过css对按钮替换主题颜色
vue3通过css对按钮替换主题颜色
SouthernWind
333 0
q4qlc6vqsegx4
|
前端开发
仿王者荣耀网页-前端网页技术设计完整精美源码HTML+CSS+JS
仿王者荣耀网页-前端网页技术设计完整精美源码HTML+CSS+JS
q4qlc6vqsegx4
413 0
仿王者荣耀网页-前端网页技术设计完整精美源码HTML+CSS+JS
q4qlc6vqsegx4
|
前端开发 JavaScript
思维-网页技术设计大作业前端HTML+CSS+JS（精美完整）
思维-网页技术设计大作业前端HTML+CSS+JS（精美完整）
q4qlc6vqsegx4
187 0
思维-网页技术设计大作业前端HTML+CSS+JS（精美完整）

热门文章

最新文章

  • 1
    CSS 居中方法总结
  • 2
    纯CSS3实现宽屏二级下拉菜单
  • 3
    CSS3实现多样的边框效果
  • 4
    CSS3-实现单选框radio的小动画
  • 5
    使用 CSS3 实现 3D 图片滑块效果【附源码下载】
  • 6
    CSS3实现时间轴效果
  • 7
    【HTML+CSS+JS】前端三剑客实现3D旋转照片墙
  • 8
    05.javascript访问CSS
  • 9
    CSS3中的选择器
  • 10
    Css:背景色透明，内容不透明之终极方法！兼容所有浏览器
  • 1
    使用CSS中的cursor属性值，常用的可设置参数，以及其他16中参数值的使用场景和示例代码
    72
  • 2
    技术心得：xpath、CSS定位方法
    46
  • 3
    【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
    165
  • 4
    CSS【详解】对齐 （含文本垂直对齐，文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐，图片和文本对齐等）
    76
  • 5
    CSS【详解】布局 display （ 含 flex 布局，grid 布局，table 布局，float 布局，响应式布局 等）
    142
  • 6
    CSS【详解】定位 position （静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky）
    51
  • 7
    CSS【详解】长度单位 （ px，%，em，rem，vw，vh，vmin，vmax，ex，ch ）
    75
  • 8
    CSS 【详解】样式选择器（含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器）
    159
  • 9
    使用HTML和CSS创建响应式表格
    167
  • 10
    常见的css优化方案都有那些
    51

    • 相关课程

    更多
  • CSS 快速掌握
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • HTML5 新特性教程
  • HTML 入门与实战

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 《零基础HTML入门教程》
  • JS零基础入门教程（上册）

    • 相关实验场景

    更多
  • 图表样式智能美化工具
  • 前端开发基础3：CSS3常见显示属性
  • CSS基础教程
    • 下一篇
    无影云桌面