SegmentFault Markdown CSS

2018-04-23 16:44:38 +08:00
 RockShake

SegmentFault Markdown CSS样式还是很漂亮的,这是从网站golobal.css扒下来自己做的备份。

如果想在Bitcron中使用,经过研究发现在主题Template/CSS/screan.css中,可以插入该代码,实现本地渲染和Bitcron渲染一致性。

需要注意的是,如果按照如下 CSS 插入Bitcron主题中,会导致图片不居中,可以考虑删除 img 代码块以保证有效。

  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 {
    // font-size: 0.92857em;
    background-color: #f6f6f6;
    font-size: 90%;
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 4px;
    letter-spacing: 0.2px;
    font-family: "Source Code Pro",Consolas,Menlo,Monaco,"Courier New",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;
  }
3527 次点击
所在节点    Markdown
0 条回复

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/449174

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX