SegmentFault Markdown CSS
SegmentFault Markdown CSS样式还是很漂亮的
这是从网站global.css
扒下来自己做的备份
Bitcron目前还没有找到应用CSS的方法,可能要研究如何编辑主题
经过研究发现在主题Template/CSS/screan.css
中,可以插入该代码,实现本地渲染和Bitcron
渲染一致性。
需要注意的是,如果按照如下CSS插入Bitcron主题中,会导致图片不居中,可以考虑删除img代码块以保证有效
同时需要注意,该代码适合网页使用,代码块会使用折叠功能,如果在编辑器中使用,导出PDF时会导致代码导出不全
font-size: 14px;
line-height: 1.6;
word-wrap: break-word;
h1 {
padding-bottom: 8px;
}
h2 {
padding-bottom: 8px;
border-bottom: 1px dotted #ccc;
}
h3 {
}
h4 {
}
h5 {
}
h6 {
}
blockquote,
h4,
ol,
p,
pre,
table,
ul {
margin: 18px 0;
}
h1,
h2,
h3 {
margin: 28px 0 18px;
}
h1:first-child,
blockquote:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
ol:first-child,
p:first-child,
pre:first-child,
table:first-child,
ul:first-child {
margin-top: 0;
}
ol,
ul {
padding-left: 30px;
}
ol p:first-child,
ul p:first-child {
margin: 0;
}
ol ol,
ol ul,
ul ol,
ul ul {
margin-top: 0;
margin-bottom: 0;
}
audio,
img,
video {
max-width: 100%;
position: static !important;
}
blockquote {
border-color: #008E59;
color: #555;
font-size: 1em;
background-color: #f9f9f9;
padding-top: 10px;
padding-bottom: 10px;
}
blockquote p:first-child {
margin-top: 0;
}
code, pre {
background-color: #f6f6f6;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
letter-spacing: 0.2px;
font-family: "Source Code Pro",Inconsolata, Consolas, Menlo, Monaco, monospace;
line-height: 1.8;
}
pre {
padding: 10px;
border: none;
overflow: auto;
line-height: 1.3;
max-height: 500px;
}
pre code {
background-color: transparent;
font-size: 1em;
overflow-wrap: normal;
white-space: inherit;
padding: 2px 4px;
}
hr {
margin: 20px auto;
border-top: 2px dotted #eee;
}
kbd {
padding: 4px 4px 3px;
background: #eee;
color: #555;
}
.x-scroll {
overflow-x: auto;
}
table {
width: 100%;
}
table td,
table th {
border: 1px solid #E6E6E6;
padding: 5px 8px;
word-break: normal;
}
table th {
background: #F3F3F3;
}
.widget-comments {
// font-size: 13px;
}
.widget-comments blockquote,
.widget-comments h1,
.widget-comments h2,
.widget-comments h3,
.widget-comments h4,
.widget-comments ol,
.widget-comments p,
.widget-comments pre,
.widget-comments table,
.widget-comments ul {
margin: 10px 0;
}
.widget-comments > h1:first-child,
.widget-comments blockquote:first-child,
.widget-comments h2:first-child,
.widget-comments h3:first-child,
.widget-comments h4:first-child,
.widget-comments ol:first-child,
.widget-comments p:first-child,
.widget-comments pre:first-child,
.widget-comments table:first-child,
.widget-comments ul:first-child {
margin-top: 0;
}
可以使用如下代码替换其中代码区域,保证PDF导出正常:
code, tt {
padding: 1px 3px;
font-family: "Source Code Pro",Inconsolata, Consolas, Menlo, Monaco, monospace;
font-size: 0.85em;
white-space: pre-wrap;
border: #E3EDF3 1px solid;
background: #F7FAFB;
border-radius: 2px;
-webkit-font-feature-settings: "liga" 0;
-moz-font-feature-settings: "liga" 0;
font-feature-settings: "liga" 0;
}
pre {
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0 0 1.75em 0;
border: #E3EDF3 1px solid;
width: 100%;
padding: 10px;
font-family: "Source Code Pro",Inconsolata, Consolas, Menlo, Monaco, monospace;
font-size: 0.9em;
white-space: pre;
overflow: auto;
background: #F7FAFB;
border-radius: 3px;
}
pre code, pre tt {
font-size: inherit;
white-space: pre-wrap;
background: transparent;
border: none;
padding: 0;
}
Comments