測試簡書的樣式

測試出簡書的markdown中CSS的樣式,因?yàn)椴惶矚g代碼的背景色误澳,自己改了一下顏色敏沉。嗯果正。差不多就是這樣。簡書的markdown不支持公式這個(gè)有點(diǎn)難
接受盟迟。


/* *{font-size:10px }*/
.markdown{
  flex: 1;
  -webkit-flex: 1;
  word-wrap: break-word;
  overflow-y: auto;

  color: #2f2f2f;
  font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  font-size: 1.6rem;
  font-weight: normal;
  line-height: 1.7;
}
/*標(biāo)題*/
.markdown h1,.markdown h2,.markdown h3,.markdown h4,.markdown h5,.markdown h6{
  margin: 0;
  color: inherit;
  line-height: 1.8;
  text-rendering: optimizelegibility;
}
.markdown h1{font-size: 26px;}
.markdown h2{font-size: 24px;}
.markdown h3{font-size: 22px;}
.markdown h4{font-size: 20px;}
.markdown h5{font-size: 18px;}
.markdown h6{font-size: 16px;}
/*列表*/
ul, ol{
  text-align: justify;
  text-justify: inter-ideograph;
  padding: 0;
  margin: 0 0 20px 25px;
}
.markdown li{line-height: 30px;}
/*正文*/
.markdown p{
  margin: 0 0 25px 0;
}
/*引用*/
.markdown blockquote{
  padding: 10px 15px;
  margin: 0 0 20px;
  background-color: whitesmoke;
  border-left: 4px solid #009688;
  word-break: break-word;
  font-size: 15px;
  font-weight: 100;
  line-height: 30px;
}
.markdown blockquote p{
  font-size: 15px;
  font-weight: normal;
  line-height: 1.7;
}
.markdown blockquote p:last-child{margin: 0;}
blockquote:before, blockquote:after {content: "";}

/* 斜體 && 加粗 && 超鏈接 */
.markdown em{font-style: italic;}
.markdown strong{font-weight: bold;}
.markdown a{color: #4094c7;text-decoration: none;}

/*代碼*/
.markdown pre{
  word-wrap: normal;
  word-break: break-all;
  white-space: pre;
  overflow: auto;
  overflow-x: auto;
  margin-bottom: 20px;

  background: #f6f6f6;
  color: #657b83;
  -webkit-text-size-adjust: none;

  max-height: 500px;

  display: block;
  padding: 9.5px;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 20px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.15)
}
.markdown pre code{
  padding: 0;
  background-color: transparent;
  white-space: pre;
  border: none;
  color: #657b83;
  font-size: 12px;
}

/*表格*/
.markdown table{
  width: 100%;
  margin-bottom: 20px;
  border: 1px solid #dddddd;
  border-collapse: collapse;
  border-left: none;
  max-width: 100%;
  background-color: transparent;
}
.markdown table th,.markdown table td{
  padding: 8px;
  border-left: 1px solid #dddddd;
  border-top: 1px solid #dddddd;
  line-height: 20px;
  text-align: center;
  vertical-align: center;
}
.markdown table th{
  font-weight: bold;
  vertical-align: center;
}

/* 圖片 */
.markdown .image{
  margin: 0 auto 20px;
  text-align: center;
}
.markdown .image img{
  max-width: 100%;
  width: auto;
  height: auto;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}
.markdown .imageDesc{
  min-width: 20%;
  min-height: 22px;
  display: inline-block;
  padding: 10px;
  margin: 0 auto;
  border-bottom: 1px solid #d9d9d9;
  font-size: 13px;
  color: #999999;
  font-style: italic;
  line-height: 1.7;
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末秋泳,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子攒菠,更是在濱河造成了極大的恐慌迫皱,老刑警劉巖,帶你破解...
    沈念sama閱讀 219,188評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件辖众,死亡現(xiàn)場離奇詭異卓起,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)凹炸,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,464評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門戏阅,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人啤它,你說我怎么就攤上這事奕筐。” “怎么了变骡?”我有些...
    開封第一講書人閱讀 165,562評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵离赫,是天一觀的道長。 經(jīng)常有香客問我塌碌,道長渊胸,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,893評(píng)論 1 295
  • 正文 為了忘掉前任台妆,我火速辦了婚禮翎猛,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘接剩。我一直安慰自己办成,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,917評(píng)論 6 392
  • 文/花漫 我一把揭開白布搂漠。 她就那樣靜靜地躺著迂卢,像睡著了一般。 火紅的嫁衣襯著肌膚如雪桐汤。 梳的紋絲不亂的頭發(fā)上而克,一...
    開封第一講書人閱讀 51,708評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音怔毛,去河邊找鬼员萍。 笑死,一個(gè)胖子當(dāng)著我的面吹牛拣度,可吹牛的內(nèi)容都是我干的碎绎。 我是一名探鬼主播螃壤,決...
    沈念sama閱讀 40,430評(píng)論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢(mèng)啊……” “哼筋帖!你這毒婦竟也來了奸晴?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,342評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤日麸,失蹤者是張志新(化名)和其女友劉穎寄啼,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體代箭,經(jīng)...
    沈念sama閱讀 45,801評(píng)論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡墩划,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,976評(píng)論 3 337
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了嗡综。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片乙帮。...
    茶點(diǎn)故事閱讀 40,115評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖极景,靈堂內(nèi)的尸體忽然破棺而出蚣旱,到底是詐尸還是另有隱情,我是刑警寧澤戴陡,帶...
    沈念sama閱讀 35,804評(píng)論 5 346
  • 正文 年R本政府宣布塞绿,位于F島的核電站,受9級(jí)特大地震影響恤批,放射性物質(zhì)發(fā)生泄漏异吻。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,458評(píng)論 3 331
  • 文/蒙蒙 一喜庞、第九天 我趴在偏房一處隱蔽的房頂上張望诀浪。 院中可真熱鬧,春花似錦延都、人聲如沸雷猪。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,008評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽求摇。三九已至,卻和暖如春殊者,著一層夾襖步出監(jiān)牢的瞬間与境,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,135評(píng)論 1 272
  • 我被黑心中介騙來泰國打工猖吴, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留摔刁,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,365評(píng)論 3 373
  • 正文 我出身青樓海蔽,卻偏偏與公主長得像共屈,于是被迫代替她去往敵國和親绑谣。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,055評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,180評(píng)論 25 707
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫拗引、插件借宵、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,107評(píng)論 4 62
  • 夜雨敲窗攜涼意 青瓜伴我感秋濃 日升日落未覺遠(yuǎn) 月缺月圓年復(fù)年
    傾新閱讀 193評(píng)論 0 0
  • 每天都在淚水中度過,看著年糕日漸圓潤的小身子寺擂、我想我吃再多苦都是值得的
    豆包隨手記閱讀 148評(píng)論 0 0
  • 我的幸福生活暇务,從早上開始 1泼掠,每天早上一醒來怔软,我先給慈善群發(fā)一包紅包,寫上日行一善择镇,錢不多挡逼,就只有一元 2,我開始...
    一棵樹閱讀 238評(píng)論 2 1