自制的简书排版
2014-06-22 本文已影响832人
wwwWo
因为默认的简书排版在我电脑上看起来,宽度太窄了,然后标题字体太大。所以干脆自制了一个排版格式,配合firefox+stylish,先贴出来,迟点上传至userstyles。
附下载链接 :: https://userstyles.org/styles/102748/personal-markdown-for-jianshu
如果哪天简书支持自定义主题那就帅爆了。
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("jianshu.io") {
/*
* NOTE:
* - The use of browser-specific styles (-moz-, -webkit-) should be avoided.
* If used, they may not render correctly for people reading the email in
* a different browser than the one from which the email was sent.
* - The use of state-dependent styles (like a:hover) don't work because they
* don't match at the time the styles are made explicit. (In email, styles
* must be explicitly applied to all elements -- stylesheets get stripped.)
*/
/* This is the overall wrapper, it should be treated as the `body` section. */
.markdown-here-wrapper {
}
/* To add site specific rules, you can use the `data-md-url` attribute that we
add to the wrapper element. Note that rules like this are used depending
on the URL you're *sending* from, not the URL where the recipient views it.
*/
/* .markdown-here-wrapper[data-md-url*="mail.yahoo."] ul { color: red; } */
.article pre, code {
font-size: 0.85em !important;
font-family: Consolas, Inconsolata, Courier, monospace !important;
}
.article code {
margin: 0 0.15em !important;
padding: 0 0.3em !important;
white-space: pre-wrap !important;
word-wrap: break-word !important;
word-break: normal !important;
border: 3px solid #4F6128 !important;
background-color: #4F6128 !important;
border-radius: 3px !important;
color: #ffffff !important;
display: inline !important; /* added to fix Yahoo block display of inline code */
}
.article pre {
font-size: 1em !important;
line-height: 1.2em !important;
}
.article pre code {
white-space: pre;
overflow: auto; /* fixes issue #70: Firefox/Thunderbird: Code blocks with horizontal scroll would have bad background colour */
border-radius: 3px !important;
border: 1px solid #CCC !important;
padding: 0.5em 0.7em !important;
display: block !important; /* added to counteract the Yahoo-specific `code` rule; without this, code blocks in Blogger are broken */
}
/* In edit mode, Wordpress uses a `* { font: ...;} rule+style that makes highlighted
code look non-monospace. This rule will override it. */
.markdown-here-wrapper[data-md-url*="wordpress."] code span {
font: inherit !important;
}
/* Wordpress adds a grey background to `pre` elements that doesn't go well with
our syntax highlighting. */
.markdown-here-wrapper[data-md-url*="wordpress."] pre {
background-color: transparent !important;
}
/* This spacing has been tweaked to closely match Gmail+Chrome "paragraph" (two line breaks) spacing. */
p {
/* !important is needed here because Hotmail/Outlook.com uses !important to
kill the margin in <p>. We need this to win. */
margin: 1.2em 0 !important;
}
.article table, pre, dl, blockquote, q, ul, ol {
margin: 1.2em 0 !important;
}
.article ul, ol {
padding-left: 2em !important;
}
.article li {
margin: 0.5em 0 !important;
}
/* Space paragraphs in a list the same as the list itself. */
.article li p {
/* Needs !important to override rule above. */
margin: 0.5em 0 !important;
}
/* Smaller spacing for sub-lists */
.article ul ul, ul ol, ol ul, ol ol {
margin: 0 !important;
padding-left: 1em !important;
}
.article dl {
padding: 0 !important;
}
.article dl dt {
font-size: 1em !important;
font-weight: bold !important;
font-style: italic !important;
}
.article dl dd {
margin: 0 0 1em !important;
padding: 0 1em !important;
}
.article blockquote, q {
border-left: 4px solid #DDD !important;
padding: 0 1em !important;
color: #777 !important;
quotes: none !important;
}
.article blockquote::before, blockquote::after, q::before, q::after {
content: none !important;
}
.article h1, h2, h3, h4, h5, h6 {
margin: 0.5em 0 1em !important;
}
.article h1 {
font-size: 2em !important;
color: #76923C;
border-left: 0.6em solid #76923C !important;
border-bottom: 1px solid #76923C !important;
text-indent: 0.6em !important;
text-shadow: 0 1px #ccc !important;
}
.article h2 {
font-size: 1.2em !important;
border-bottom: 1px solid #CCC !important;
color: #4c721d !important;
text-shadow: 0px -1px 1px #eeeeee !important;
font-weight: bold !important;
}
.article h3 {
font-size: 1.1em !important;
color: #df7925 !important;
font-weight: bold !important;
}
.article h4 {
font-size: 0.8em !important;
color: #FAC08F !important;
margin: 0 0.15em !important;
padding: 0 0.3em !important;
white-space: pre-wrap !important;
border: 3px solid #333333 !important;
background-color: #333333 !important;
border-radius: 3px !important;
}
.article h5 {
font-size: 1em !important;
background: #333333 !important;
color: #ffffff !important;
padding: 0.6em !important;
border-radius: 3px !important;
font-weight: bold !important;
}
.article h6 {
font-size: 1em !important;
color: #777 !important;
}
.article strong {
color: #123456 !important;
}
.article table {
padding: 0 !important;
border-collapse: collapse !important;
border-spacing: 0 !important;
font-size: 1em !important;
font: inherit !important;
border: 0 !important;
}
.article tbody {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
.article table tr {
border: 0 !important;
border-top: 1px solid #CCC !important;
background-color: white !important;
margin: 0 !important;
padding: 0 !important;
}
.article table tr:nth-child(2n) {
background-color: #F8F8F8 !important;
}
.article table tr th, table tr td {
font-size: 1em !important;
border: 1px solid #CCC !important;
margin: 0 !important;
padding: 0.5em 1em !important;
}
.article table tr th {
font-weight: bold !important;
background-color: #F0F0F0 !important;
}
.article {
width: 840px !important;
}
.container {
margin-left: 300px !important;
}
.article img{
margin: 0px auto 25px !important;
border: 5px #76923C !important;
display:block !important;
max-width:700px !important;
max-height:800px !important;
}
}