让你的公众号Markdown排版更好看

前言

在我们学会了基础的Markdown标记语法后，我们会发现在不同的平台或者工具上Markdown渲染后的效果都不同。那么怎样自由定制我们想要的markdown效果呢，今天我们就借助CSS层叠样式表，和马克飞象工具，让你的公众号排版更自由更好看。

图片.png

一、关键想法

1. 代码高亮

如何设置自由的代码高亮风格，是提高markdown颜值的第一步。

xcode风格：

图片.png
sublime风格：
图片.png

操作方法可见我的前一篇文章马克飞象如何自定义代码高亮风格。

2. 标题风格的设置

为了让你的文章层次更清晰，一级二级标题的样式风格我们可以自由的定制：

图片.png

在css的h1、h2或者h3中，我们可以加上下面这句，就可以让对应级数的标题设置相应的颜色、字体大小、分隔线、小竖线：

color: #159957;   /*这里我们给层级标题设为绿色*/
font-size: 22px;  /*小标题的字体大小*/
border-bottom: 1px solid #159957;  /*设置一个一个像素宽带的绿色
分隔线*/
border-left: 3px solid #159957; /*设置一个3像素宽的小竖线*/

二、参考CSS代码

body {
    font-family: "Arial", Helvetica, Arial, sans-serif;
    padding:1em;
    margin:auto;
    max-width:42em;
    background:#fefefe;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
}

h1 {
    color: #000000;
    font-size: 28pt;
}

h2 {
    color: #000000;
    font-size: 24px;
}

h3 {
    color: #159957;
    font-size: 22px;
    border-bottom: 1px solid #159957;
}

h4 {
    font-size: 20px;
}

h5 {
    font-size: 18px;
    padding-left: 16px;
    border-left: 3px solid #159957;
}

h6 {
    color: #777777;
    background-color: inherit;
    font-size: 14px;
}

/*  hr代表水平线  */
hr {
    height: 0.2em;
    border: 0;
    color: rgb(184, 245, 148);
    background-color: #159957;
}

p, blockquote, ul, ol, dl, li, table, pre {
    margin: 15px 0;
}

a, a:visited {
    color: #4183C4;
    background-color: inherit;
    text-decoration: none;
}

#message {
    border-radius: 6px;
    border: 1px solid #ccc;
    display:block;
    width:100%;
    height:60px;
    margin:6px 0px;
}

button, #ws {
    font-size: 10pt;
    padding: 4px 6px;
    border-radius: 5px;
    border: 1px solid #bbb;
    background-color: #eee;
}

code, pre, #ws, #message {
    font-family: Arial;
    font-size: 12pt;
}

code {
    border: 1px solid #EAEAEA;
    margin: 0 2px;
    padding: 0 5px;
}

pre {
    border: 1px solid #CCCCCC;
    overflow: auto;
    padding: 2px 2px;
}

pre > code {
    border: 0;
    margin: 0;
    padding: 0;
}

blockquote {
    font-size: 1em;
    font-style: normal;
    padding: 15px 15px;
    position: relative;
    line-height: 1.8;
    text-indent: 0;
    border-left: 3px solid #159957;
    color: #888;
}

#ws { background-color: #DC143C; }

.send { color:#77bb77; }
.server { color:#7799bb; }
.error { color:#AA0000; }

table tr:nth-child(2n) {
  background-color: rgb(216, 240, 219);
}

/*
 以下是控制代码高亮的部分：
Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/

*/

.hljs {
    display: block;
    overflow-x: auto;
    padding: 0.5em;
    background: #23241f;
  }
  
  .hljs,
  .hljs-tag,
  .hljs-subst {
    color: #f8f8f2;
  }
  
  .hljs-strong,
  .hljs-emphasis {
    color: #a8a8a2;
  }
  
  .hljs-bullet,
  .hljs-quote,
  .hljs-number,
  .hljs-regexp,
  .hljs-literal,
  .hljs-link {
    color: #ae81ff;
  }
  
  .hljs-code,
  .hljs-title,
  .hljs-section,
  .hljs-selector-class {
    color: #a6e22e;
  }
  
  .hljs-strong {
    font-weight: bold;
  }
  
  .hljs-emphasis {
    font-style: italic;
  }
  
  .hljs-keyword,
  .hljs-selector-tag,
  .hljs-name,
  .hljs-attr {
    color: #f92672;
  }
  
  .hljs-symbol,
  .hljs-attribute {
    color: #66d9ef;
  }
  
  .hljs-params,
  .hljs-class .hljs-title {
    color: #f8f8f2;
  }
  
  .hljs-string,
  .hljs-type,
  .hljs-built_in,
  .hljs-builtin-name,
  .hljs-selector-id,
  .hljs-selector-attr,
  .hljs-selector-pseudo,
  .hljs-addition,
  .hljs-variable,
  .hljs-template-variable {
    color: #e6db74;
  }
  
  .hljs-comment,
  .hljs-deletion,
  .hljs-meta {
    color: #75715e;
  }
  

更多内容欢迎关注公众号：小雨编程