示例
代码
:root {
--demo-color: #42B983;
--thead-color: var(--demo-color);
--th-color:#d9f1e6;
--tr-color: #f9fdfb;
--tr2-color: #f2faf6;
--table-color: var(--demo-color);
}
html {
font-size: 16px;
}
body {
}
#write {
max-width: 860px;
margin: 0 auto;
padding: 20px 30px 100px;
}
@media only screen and (min-width: 1400px) {
#write {
max-width: 1024px;
}
}
@media only screen and (min-width: 1800px) {
#write {
max-width: 1200px;
}
}
a {
color: #42b983;
font-weight: 600;
padding: 0 2px;
text-decoration: none;
}
blockquote {
border-left: 0.375rem solid #42b983;
padding: 0.625rem 0.9375rem;
color: #777;
background-color: #ebf7f2;
}
h1,
h2,
h3,
h4,
h5 {
margin:1.5rem 0;
font-weight: bold;
line-height: 1.4;
cursor: text;
}
h1 {
text-align: center;
font-size: 2.2rem;
line-height: 2.2;
color: #fff;
background-color: var(--demo-color);
}
h2 {
font-size: 1.75rem;
line-height: 1.75;
border-bottom: 0.1875rem solid #42b983;
}
h2::before {
content: '# ' !important;
color: var(--demo-color);
}
h3 {
font-size: 1.4rem;
border-left: 0.4375rem solid var(--demo-color);
padding: 0.3125rem 0.625rem;
}
h4 {
font-size: 1.2rem;
display: inline-block;
padding: 0 0.375rem;
border: 1px solid var(--demo-color);
border-top: 0.25rem solid var(--demo-color);
}
h5 {
font-size: 1rem;
}
hr {
height: 0.125rem;
padding: 0;
margin: 1rem 0;
background-color: var(--demo-color);
border: 0 none;
overflow: hidden;
box-sizing: content-box;
}
.md-fences {
border: 1px solid #e8e8e8;
background-color: #faf8f8;
padding: 0.3rem;
}
code{
font-weight: bold;
color: #f56c6c;
background-color: #fef0f0;
padding: 0.125rem 0.25rem;
}
table {
padding: 0;
word-break: initial;
text-align: center;
}
thead {
}
table th {
font-weight: bold;
color: var(--thead-color);
background-color: var(--th-color);
border: 1px solid var(--table-color);
border-bottom: 0;
margin: 0;
padding: 6px 13px;
}
table tr {
border: 1px solid var(--table-color);
margin: 0;
padding: 0;
background-color: var(--tr-color);
}
table tr:nth-child(2n) {
background-color: var(--tr2-color);
}
table td {
border: 1px solid var(--table-color);
margin: 0;
padding: 6px 13px;
}
table th:first-child,
table td:first-child {
margin-top: 0;
}
table th:last-child,
table td:last-child {
margin-bottom: 0;
}
.outline-item:hover {
color: #fff;
background-color: var(--demo-color);
}
.outline-item-active {
color: var(--demo-color);
}
.outline-item-active:hover {
color: #fff;
}