Md2All 簡介
Md2All是Markdown的排版利器,支援 “一鍵排版” 、自定義CSS和80多種代碼高亮。
能讓Markdown内容,無需作任何調整就能一鍵複制到微信公衆号、部落格園、掘金、知乎、CSDN、51cto、wordpress、hexo。。。等平台(親測有效)。
除此之外,還有以下優點:
支援把圖檔自動上傳到雲圖床;
支援Latex數學公式在公衆号等平台完美顯示;
支援生成帶樣式的html檔案;
甚至支援直接用原生的html,css排版。
Md2All的遺憾
隻不過,很遺憾的是Md2All官網(
http://md.aclickall.com/)提供的模闆樣式都不能讓我滿意。
但Md2All很人性化,支援自定義CSS——程式員最喜歡的就是這個:如果你長得不夠漂亮,我可以給你做個手術啊,保證人見人愛!
琢磨了很久,終于琢磨出來了一個我自己很滿意的自定義CSS(純潔的微笑「我的标杆」竟然也看上了我這套排版),是以我決定分享出來。
先上代碼(你可以直接複制拿走,或者在此基礎上改改):
/*可任意修改樣式,或恢複預設值,儲存後生效
相對“預設樣式”而作的修改會用 紅色 标注*/
.output_wrapper/*此屬性為全局*/
{
font-size: 16px;
color: #3e3e3e;
line-height: 1.6;
word-spacing:0px;
letter-spacing:1px;
font-family: "Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
}
.output_wrapper *
{
font-size: inherit ;
color: inherit;
line-height: inherit;
margin:0px;
padding:0px;
}
p {/*段落*/
margin: 1.5em 0px;
padding-left:1em;
padding-right:1em;
}
h1,h2,h3,h4,h5,h6 {
margin: 1.5em 0px;
font-weight:bold;
color:#159957; /*改變了其預設的标題顔色*/
text-align: center; /*改變了其預設值,使其标題居中*/
}
h1 {
font-size: 1.6em ;
}
h2 {
font-size: 1.4em;
}
h3 {
font-size: 1.3em;
}
h4 {
font-size: 1.2em;
}
h5 {
font-size: 1em;
}
h6 {
font-size: 1em;
}
ul, ol {
padding-left: 32px;
}
ul{ /*無序清單*/
list-style-type: disc;
}
ol { /*有序清單*/
list-style-type: decimal;
}
li *
{
/* color: #3e3e3e;*/
}
li{ /*在公衆号下,改變不了li符号的屬性(如顔色),并會影響其子元素的屬性;而在其它部落格平台中,則能正常使用*/
margin-bottom: 0.5em;
/* color:#159957; */
}
.code_size_default /*代碼塊預設size*/
{
line-height: 18px;
font-size: 14px;
font-weight:normal;
word-spacing:0px;
letter-spacing:0px;
}
.code_size_tight /*代碼塊緊湊size*/
{
line-height: 15px;
font-size: 14px;
font-weight:normal;
word-spacing:-3px;
letter-spacing:0px;
}
pre code /*代碼塊*/
{
font-family: Consolas, Inconsolata, Courier, monospace;
border-radius: 0px;
}
blockquote { /*引用塊*/
display: block;
padding: 15px 1rem;
font-size: 0.9em;
padding-right: 15px;
margin: 1em 0;
color: #819198;
border-left: 6px solid #dce6f0;
background: #f2f7fb;
overflow: auto;
overflow-scrolling: touch;
word-wrap: normal;
word-break: normal;
}
blockquote p {
margin: 0px;
}
a { /*超連結*/
text-decoration: none;
color: #1e6bb8;
word-wrap:break-word;
}
strong /*強調*/
{
font-weight: bold;
}
em /*斜體*/
{
font-style:italic;
}
del /*删除線*/
{
font-style:italic;
}
strong em/*強調的斜體*/
{
font-weight: bold;
}
hr { /*分隔線*/
height: 1px;
margin: 1.5rem 0px;
border: none;
border-top: 1px dashed #A5A5A5;
}
code /*行内代碼*/
{
word-break:break-all;
word-wrap: break-word;
padding: 2px 4px;
border-radius: 4px;
margin:0 2px;
background:#f8f8f8;
font-size: 14px;
font-weight:normal;
}
img
{
display: block;
margin:0 auto; /*圖檔水準居中*/
/* margin:0 0; */ /*圖檔水準居左,如需要請打開*/
max-width:100%;
}
figcaption/*圖檔描述文字*/
{
margin-top:10px;
text-align:center;
/* text-align:left; */ /*當圖檔水準居左時,請打開*/
color:#999;
font-size: 0.7em;
}
/*================表格開始================*/
table
{
display:table;
width: 100% ;
text-align: left;
}
tbody {
border: 0;
}
table tr {
border: 0;
border-top: 1px solid #CCC;
background-color: white;
}
/*隔行改變行的背景色,如需要請打開*/
/*
table tr:nth-child(2n) {
background-color: #F8F8F8;
}
*/
table tr th, table tr td {
font-size: 1em;
border: 1px solid #CCC;
padding: 0.5em 1em;
text-align: left;
}
/*表頭的屬性*/
table tr th {
font-weight: bold;
background-color: #F0F0F0;
}
/*================表格結束================*/
/*================數學公式開始================*/
.katex-display {/*塊公式*/
font-size:1.22em;
}
.katex
{/*行内公式*/
padding:8px 3px;
}
.katex-display > .katex
{/*塊公式*/
display:inline-block;
text-align:center;
padding:3px;
}
.katex img
{/*行内公式對應的圖檔*/
display:inline-block;
vertical-align:middle;
}
/*================數學公式結束================*/
a[href^="#"] sup
{/*注腳*/
vertical-align:super;
margin:0 2px;
padding:1px 3px;
color: #ffffff;
background:#666666;
font-size:0.7em;
}
/*================任務清單開始================*/
.task-list-list {
list-style-type: none;
}
.task-list-list.checked {/*已完成*/
color: #3e3e3e;
}
.task-list-list.uncheck {/*未完成*/
color: #bfc1bf;
}
.task-list-list .icon_uncheck, .task-list-list .icon_check {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
}
.task-list-list .icon_check:before
{/*已完成*/
content: "√";
border: 2px solid #3e3e3e;
color:red;
}
.task-list-list .icon_uncheck:before
{/*未完成*/
content: "x";
border: 2px solid #bfc1bf;
color: #bfc1bf;
}
.task-list-list .icon_check:before, .task-list-list .icon_uncheck:before
{/*标志框*/
padding:2px;
padding-left: 5px;
padding-right: 8px;
border-radius:5px;
}
/*================任務清單結束================*/
.toc
{/*總目錄*/
margin-left:25px;
}
.toc_item
{/*每條目錄*/
display:block;
}
.toc_left
{/*每級目錄的縮進*/
margin-left:25px;
}