美文网首页
自制的简书排版

自制的简书排版

作者: wwwWo | 来源:发表于2014-06-22 17:42 被阅读832次

    因为默认的简书排版在我电脑上看起来,宽度太窄了,然后标题字体太大。所以干脆自制了一个排版格式,配合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;
      
      }  
    }

    相关文章

      网友评论

          本文标题:自制的简书排版

          本文链接:https://www.haomeiwen.com/subject/hxrjtttx.html