自制的简书排版

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;
  
  }  
}
上一篇下一篇

猜你喜欢

热点阅读