首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >markdown样式代码保存

markdown样式代码保存

作者头像
xing.org1^
发布2020-02-14 18:06:44
5900
发布2020-02-14 18:06:44
举报
文章被收录于专栏:前端说吧前端说吧

/*此样式是没任何效果的,留给你填写的 你可以随意修改,组合你想要的css样式 没有最好的,只有最合适的, 看看后面的示例,你就会懂得写个你最爱的样式,并保存了的! 建议先复制某一你喜欢的css模板样式到此样式下,再在此基础上自定义自己的css样式。 来试试吧! ^_^*/

h1,h2,h3,h4,h5,h6 { color: #3e3e3e; } h1 span,h2 span,h3 span,h4 span{ border-left: 5px solid #ff5722; padding-left: 10px; } h1{ border-bottom:2px solid #ff5722; line-height: 38px; } h1 span{ color: white; background: #ff5722; border-left: 0; padding: 0 10px; border-top-left-radius: 8px; border-top-right-radius: 8px; } /* 一级标题 */ h1 { border-bottom:2px solid #ff5722; font-size:1.3em; }

/* 一级标题内容 */ h1 span { display:inline-block; font-weight:normal; background:#ff5722; color:#ffffff; padding:3px 10px 1px; border-top-right-radius:3px; border-top-left-radius:3px; margin-right:3px; }

/* 一级标题修饰 请参考有实例的主题 */ h1:after { }

/* 二级标题 */ h2 { text-align:left; margin:20px 10px 0px 0px; }

/* 二级标题内容 */ h2 span { font-family:STHeitiSC-Light; font-size:18px; font-weight:bolder; display:inline-block; padding-left:10px; border-left:5px solid #ff5722; }

/* 二级标题修饰 请参考有实例的主题 */ h2:after { }

/* 三级标题 */ h3 { }

/* 三级标题内容 */ h3 span { font-size:14px; color:#ff5722; }

/* 三级标题修饰 请参考有实例的主题 */ h3:after { }

/* 无序列表整体样式

  • list-style-type: square|circle|disc; */ ul { font-size: 14px; }

/* 无序列表整体样式

  • list-style-type: upper-roman|lower-greek|lower-alpha; */ ol { font-size: 14px; }

/* 列表内容,不要设置li */ li section { font-size:13px; }

/* 引用

  • 左边缘颜色 border-left-color:black;
  • 背景色 background:gray; */ blockquote { font-style:normal; border-left:none; padding:10px; position:relative; line-height:1.8; border-radius:0px 0px 10px 10px; color: #333; background: #f5f5f5; box-shadow: #eaeaea 0px 10px 15px; } blockquote:before { content:"“"; display:inline; color:#cecece; font-size:3em; float: left; line-height: 1em; font-weight:500; }

/* 引用文字 */ blockquote p { color:#333; font-size:13px; display:inline; } blockquote:after { content:"”"; float:right; display:inline; color:#cecece; font-size:3em; line-height:1em; font-weight:500; }

/* 链接

  • border-bottom: 1px solid #009688; */ a { color:#ff5722; border-bottom: 1px solid #ff3502; font-family:STHeitiSC-Light; }

/* 加粗 */ strong { font-weight:border; color:#ff5722; }

/* 斜体 */ em { color:#ff5722; letter-spacing:0.3em; }

/* 加粗斜体 */ strong em { color:#ff5722; letter-spacing:0.3em; }

/* 删除线 */ del { }

/* 分隔线

  • 粗细、样式和颜色
  • border-top:1px solid #3e3e3e; */ hr { height:1px; padding:0; border:none; border-top:medium solidid #333; text-align:center; background-image:linear-gradient(to right,rgba(248,57,41,0),rgba(248,57,41,0.75),rgba(248,57,41,0)); }

/* 图片

  • 宽度 width:80%;
  • 居中 margin:0 auto;
  • 居左 margin:0 0; */ img { border-radius:0px 0px 5px 5px; display:block; margin:20px auto; width:85%; height:100%; object-fit:contain; box-shadow:#84A1A8 0px 10px 15px; }

/* 图片描述文字 */ figcaption { display:block; font-size:12px; font-family:PingFangSC-Light; }

/* 行内代码 */ p code,li code { color:rgb(271,93,108); }

/* 非微信代码块

  • 代码块不换行 display:-webkit-box !important;
  • 代码块换行 display:block; */ pre code { border-radius: 8px; }

/*

  • 表格内的单元格
  • 字体大小 font-size: 16px;
  • 边框 border: 1px solid #ccc;
  • 内边距 padding: 5px 10px; */ table tr th, table tr td { font-size: 14px; }

/* 脚注文字 */ .footnote-word { color:#ff5722; }

/* 脚注上标 */ .footnote-ref { color:#ff5722; }

/脚注链接样式/ .footnote-item em { color:#6E1E51; font-size:12px; }

/* "参考资料"四个字

  • 内容 content: "参考资料"; */ .footnotes-sep:before { }

/* 参考资料编号 */ .footnote-num { }

/* 参考资料文字 */ .footnote-item p { }

/* 参考资料解释 */ .footnote-item p em { }

/* 行间公式

  • 最大宽度 max-width: 300% !important; */ .block-equation svg { }

/* 行内公式 */ .inline-equation svg { }

pre{ margin-top: 10px; }

/第二种/

/可任意修改样式,或恢复预设值,保存后生效 相对“默认样式”而作的修改会用 红色 标注/

.output_wrapper/此属性为全局/ { font-size: 16px; color: #3e3e3e; line-height: 1.6; word-spacing:0px; letter-spacing:0px; font-family: "Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif; } .output_wrapper * { font-size: inherit ; color: inherit; line-height: inherit; margin:0px; padding:0px; }

p {/段落/ margin: 1.5em 0px; } h1,h2,h3,h4,h5,h6 { margin: 1.5em 0px; font-weight:bold; } h1 { font-size: 1.6em ;

} h2 { font-size: 1.4em; } h3 { font-size: 1.3em; } h4 { font-size: 1.2em; } h5 { font-size: 1em; } h6 { font-size: 1em; } h1,h2{/增加对h3标题的修改/ border-bottom:2px solid #ff5722; } h1 span, h2 span{/增加对h3标题字体的修改/ display:inline-block; font-weight:normal; background: #ff5722; color:#ffffff; padding:3px 10px 0px; border-top-right-radius: 6px; border-top-left-radius: 6px; margin-right:3px; } h1:after{/增加对h3标题后面的修饰/ display: inline-block; content:" "; vertical-align: bottom; border-bottom: 36px solid #ffdfd5; border-right: 20px solid transparent; } h2 span{ background: white; font-weight:bold; padding-left: 0 } h2 span, h3 span{ color: #ff5722; } ul, ol { padding-left: 32px; } ul{ /无序列表/ list-style-type: disc; } ol { /有序列表/ list-style-type: decimal; } li * { /* color: #3e3e3e;*/ }

li{ /在公众号下,改变不了li符号的属性(如颜色),并会影响其子元素的属性;而在其它博客平台中,则能正常使用/ margin-bottom: 0.5em; /* color:#159957; / } .code_size_default /代码块默认size/ { line-height: 18px; font-size: 14px; font-weight:normal; word-spacing:0px; letter-spacing:0px; } .code_size_tight /代码块紧凑size/ { line-height: 15px; font-size: 11px; font-weight:normal; word-spacing:-3px; letter-spacing:0px; } pre code /代码块/ { font-family: Consolas, Inconsolata, Courier, monospace; border-radius: 0px; } blockquote { /引用块*/ display: block; padding: 15px 1rem; font-size: 0.9em; padding-right: 15px; margin: 1em 0; color: #819198; border-left: 6px solid #dce6f0; background: #f2f7fb; overflow: auto; overflow-scrolling: touch; word-wrap: normal; word-break: normal; } blockquote p { margin: 0px; }

a { /超链接/ text-decoration: none; color: #1e6bb8; word-wrap:break-word; }

strong /强调/ { font-weight: bold; } em /斜体/ { font-style:italic; } del /删除线/ { font-style:italic; } strong em/强调的斜体/ { font-weight: bold; }

hr { /分隔线/ height: 1px; margin: 1.5rem 0px; border: none; border-top: 1px dashed #A5A5A5; }

code /行内代码/ { word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin:0 2px; color:#e96900; background:#f8f8f8; } img { display: block; margin:0 auto; /图片水平居中/ /* margin:0 0; / /图片水平居左,如需要请打开/ max-width:100%; } figcaption/图片描述文字/ { margin-top:10px; text-align:center; / text-align:left; / /当图片水平居左时,请打开*/ color:#999; font-size: 0.7em; }

/================表格开始================/ table { display:table; width: 100% ; text-align: left; } tbody { border: 0; }

table tr { border: 0; border-top: 1px solid #CCC; background-color: white;

}

/隔行改变行的背景色,如需要请打开/ / table tr:nth-child(2n) { background-color: #F8F8F8; } /

table tr th, table tr td { font-size: 1em; border: 1px solid #CCC; padding: 0.5em 1em; text-align: left; } /表头的属性/ table tr th { font-weight: bold; background-color: #F0F0F0; } /================表格结束================/

/================数学公式开始================/ .katex-display {/块公式/ font-size:1.22em; } .katex {/行内公式/ padding:8px 3px; } .katex-display > .katex {/块公式/ display:inline-block; text-align:center; padding:3px; } .katex img {/行内公式对应的图片/ display:inline-block; vertical-align:middle; } /================数学公式结束================/

a[href^="#"] sup {/注脚/ vertical-align:super; margin:0 2px; padding:1px 3px; color: #ffffff; background:#666666; font-size:0.7em; }

/================任务列表开始================/ .task-list-list { list-style-type: none; } .task-list-list.checked {/已完成/ color: #3e3e3e; }

.task-list-list.uncheck {/未完成/ color: #bfc1bf; } .task-list-list .icon_uncheck, .task-list-list .icon_check { display: inline-block; vertical-align: middle; margin-right: 10px; } .task-list-list .icon_check:before {/已完成/ content: "√"; border: 2px solid #3e3e3e; color:red; } .task-list-list .icon_uncheck:before {/未完成/ content: "x"; border: 2px solid #bfc1bf; color: #bfc1bf; } .task-list-list .icon_check:before, .task-list-list .icon_uncheck:before {/标志框/ padding:2px; padding-left: 5px; padding-right: 8px; border-radius:5px; } /================任务列表结束================/

.toc {/总目录/ margin-left:25px; } .toc_item {/每条目录/ display:block;

} .toc_left {/每级目录的缩进/ margin-left:25px; }

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-01-27 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档