⼀个⾃定义的markdown格式化css风格这个风格我打磨了不下于5次，适合markdown的⾮代码格式化，代码格式化参阅highlight啦～
⼀个⾃定义的markdown格式化css风格
.contents{
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
/*font-size: 16px;*/
line-height: 1.5;
word-wrap: break-word;
}
/* BLOCKQUOTE */
.contents blockquote {
color: #0f362d;
font-size:.8em;
font-style: italic;
border-left: 6px solid #e6e6e6;
margin-left: .7em;
padding-left: .7em;
}
.contents blockquote>:first-child {
margin-top: 0px;
}
.contents blockquote>:last-child {
margin-bottom: 0px;
}
/* TABLE */
.contents table{
margin: 0 auto;
font weight bolder
}
.contents table th {
font-weight: bold;
}
.contents table th, .contents table td {
border: 1px solid #ccc;
padding: 6px 13px;
}
.contents table tr {
border-top: 1px solid #ccc;
background-color: #fff;
}
.contents table tr:nth-child(2n) {
background-color: #f8f8f8;
}
/* H */
.contents h1,.contents h2,.contents h3,.contents h4,.contents h5,.contents h6{
padding-bottom: .3em;
margin-top: 24px;
margin-bottom: 16px;
font-weight: 600;
}
.contents h1 {
font-size: 1.5em;
color: #d33682;
}
.contents h2 {
font-size: 1.4em;
color: #9B31EA;
}
.contents h3 {
font-size: 1.3em;
border-bottom: 1px solid #eaecef;
}
.contents h4 {
color: #1d1d1d;
font-size: 1.0em;
padding-left: .3rem;
border-left: 2px solid #110dff;
margin: 0px;
}
.contents h5 {
font-size: 1.1em;
}
.contents h6 {
font-size: 1.0em;
}
/* A */
.contents a {
text-decoration: none;
}
.contents a:focus {
outline: thin dotted;
}
.contents a:active,.contents a:hover { outline: 0;
}
.contents a:hover {
text-decoration: underline;
}
.contents a:visited {
}
/
* LIST */
.contents ul,.contents ol {
margin: 0;
padding:0 0 5px 20px;
color: #d33682;
font-weight: bolder;
}
.contents ol li {
padding:5px 0px;
list-style-type: decimal;
list-style-position: outside;
}
.contents ul li {
padding:5px 0px;
list-style-type: disc;
list-style-position: outside;
}
/* pre>code */
.contents pre>code {
white-space: pre;
word-wrap: break-word;
/*background-color: #F0F0F0;
border: 1px solid #F0F0F0;*/
}
/* OT */
.contents img {
max-width: 100%
}
.contents p{
/*font-size:1.2em;*/
/*white-space: pre-wrap;*/
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。