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
Write a Comment