Markdown CSS样式

<div class="article" v-html="compiledMarkdown" v-highlight></div>
<vue-markdown class="article" v-highlight :source="content"></vue-markdown>

.article {
  text-align: left;
  color: #444;
  padding: 20px 10px;
  font-size: 14px;
}
.article:before,
.article:after {
  content: "";
  display: table;
}
.article:after {
  clear: both;
}
@media screen and (max-width: 479px) {
  .article {
    margin: 0;
  }
}
.article p,
.article table {
  line-height: 1.6em;
  margin: 1.6em 0;
}
.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
  font-weight: bold;
  color: #39aa56;
  line-height: 1em;
  margin: 0;
  padding: 1em 0 0;
}
.article h1, .h1 {
  font-size: 28px;
}
.article h2, .h2 {
  font-size: 24px;
}
.article h3, .h3 {
  font-size: 22px;
}
.article h4, .h4 {
  font-size: 20px;
}
.article h5, .h5 {
  font-size: 18px;
}
.article a {
  color: #0e83cd;
  text-decoration: none;
}
.article a:hover {
  color: #39aa56;
  text-decoration: none;
}
.article ul,
.article ol,
.article dl {
  margin-top: 1.6em;
  margin-bottom: 1.6em;
}
.article img,
.article video {
  max-width: 100%;
  height: auto;
  display: block;
  margin: auto;
}
.article iframe {
  border: none;
}
.article table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
.article th {
  font-weight: bold;
  border-bottom: 3px solid #eef1f8;
  padding-bottom: 0.5em;
}
.article td {
  border-bottom: 1px solid #eef1f8;
  padding: 10px 0;
}
.article blockquote {
  padding: 0.1px 20px;
  font-family: Arial, "open sans", "Helvetica Neue", Helvetica Neue, Helvetica, Hiragino Sans GB, Microsoft Yahei, sans-serif;
  font-size: 1.1em;
  color: rgba(44,44,44,0.6);
  margin: 1.4em 0px;
  border-left: 2px solid #39aa56;
  background: rgba(208,211,248,0.15);
}
.article blockquote p {
  font-size: 14px;
  margin: 15px 0;
}
.article blockquote footer {
  font-size: 14px;
  margin: 1.6em 0;
  font-family: -apple-system, "Arial", BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
.article blockquote footer cite:before {
  content: "—";
  padding: 0 0.5em;
}

.article hr,
.widget hr {
  border: 1px dashed #eef1f8;
}
.article strong,
.widget strong {
  font-weight: bold;
}
.article em,
.widget em,
.article cite,
.widget cite {
  font-style: italic;
}
.article sup,
.widget sup,
.article sub,
.widget sub {
  font-size: 0.75em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
.article sup,
.widget sup {
  top: -0.5em;
}
.article sub,
.widget sub {
  bottom: -0.2em;
}
.article small,
.widget small {
  font-size: 0.85em;
}
.article acronym,
.widget acronym,
.article abbr,
.widget abbr {
  border-bottom: 1px dotted;
}
.article ul,
.widget ul,
.article ol,
.widget ol,
.article dl,
.widget dl {
  margin: 0 20px;
  line-height: 1.6em;
}
.article ul ul,
.widget ul ul,
.article ol ul,
.widget ol ul,
.article ul ol,
.widget ul ol,
.article ol ol,
.widget ol ol {
  margin-top: 0;
  margin-bottom: 0;
}
.article ul,
.widget ul {
  list-style: circle;
}
.article ol,
.widget ol {
  list-style: decimal;
  margin-top: 20px;
}
.article dt,
.widget dt {
  font-weight: bold;
}
.navigater-list>a:hover {
  color: #39aa56;
  border-bottom: 5px solid #39aa56;
  text-decoration: none;
}
.hr {
  background: #39aa56;
}

.article pre,
.article .highlight {
  background: #f8f8f8;
  margin: 20px 0px;
  padding: 15px 20px;
  border-style: solid;
  border-color: #eef1f8;
  border-width: 1px 0;
  overflow: auto;
  color: #4d4d4c;
  font-size: 0.9em;
  line-height: 1em;
}
.article .highlight .gutter pre,
.article .gist .gist-file .gist-data .line-numbers {
  color: #666;
  font-size: 0.85em;
}
figure.highlight::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
figure.highlight::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0.2);
  background: rgba(0,0,0,0.1);
}
figure.highlight::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0.2);
  border-radius: 0;
  background: rgba(0,0,0,0);
}
.article pre,
.article code {
  font-family: "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace;
}
.article code {
  background: rgba(208,211,248,0.2);
  color: #444;
  padding: 0 0.3em;
}
.article pre code {
  background: none;
  text-shadow: none;
  padding: 0;
}
.article .highlight pre {
  border: none;
  margin: 0;
  padding: 0;
}
.article .highlight table {
  margin: 0;
  width: auto;
}
.article .highlight td {
  border: none;
  padding: 0;
}
.article .highlight figcaption {
  font-size: 0.85em;
  color: #8e908c;
  line-height: 1em;
  margin-bottom: 1em;
}
.article .highlight figcaption:before,
.article .highlight figcaption:after {
  content: "";
  display: table;
}
.article .highlight figcaption:after {
  clear: both;
}
.article .highlight figcaption a {
  float: right;
}
.article .highlight .gutter pre {
  color: #aaa;
  text-align: right;
  padding-right: 20px;
}
.article .highlight .line {
  height: 1.7em;
}
.article .highlight .line.marked {
  background: #d6d6d6;
}
.article .gist {
  margin: 0 -20px;
  border-style: solid;
  border-color: #eef1f8;
  border-width: 1px 0;
  background: #f8f8f8;
  padding: 15px 20px 15px 0;
}
.article .gist .gist-file {
  border: none;
  font-family: "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace;
  margin: 0;
}
.article .gist .gist-file .gist-data {
  background: none;
  border: none;
}
.article .gist .gist-file .gist-data .line-numbers {
  background: none;
  border: none;
  padding: 0 20px 0 0;
}
.article .gist .gist-file .gist-data .line-data {
  padding: 0 !important;
}
.article .gist .gist-file .highlight {
  margin: 0;
  padding: 0;
  border: none;
}
.article .gist .gist-file .gist-meta {
  background: #f8f8f8;
  color: #8e908c;
  font: 0.85em -apple-system, "Arial", BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  text-shadow: 0 0;
  padding: 0;
  margin-top: 1em;
  margin-left: 20px;
}
.article .gist .gist-file .gist-meta a {
  color: #0e83cd;
  font-weight: normal;
}
.article .gist .gist-file .gist-meta a:hover {
  text-decoration: underline;
}
pre .comment,
pre .title {
  color: #8e908c;
}
pre .variable,
pre .attribute,
pre .tag,
pre .regexp,
pre .ruby .constant,
pre .xml .tag .title,
pre .xml .pi,
pre .xml .doctype,
pre .html .doctype,
pre .css .id,
pre .css .class,
pre .css .pseudo {
  color: #c82829;
}
pre .number,
pre .preprocessor,
pre .built_in,
pre .literal,
pre .params,
pre .constant {
  color: #fb6d19;
}
pre .class,
pre .ruby .class .title,
pre .css .rules .attribute {
  color: #718c00;
}
pre .string,
pre .value,
pre .inheritance,
pre .header,
pre .ruby .symbol,
pre .xml .cdata {
  color: #718c00;
}
pre .css .hexcolor {
  color: #3e999f;
}
pre .function,
pre .python .decorator,
pre .python .title,
pre .ruby .function .title,
pre .ruby .title .keyword,
pre .perl .sub,
pre .javascript .title,
pre .coffeescript .title {
  color: #4271ae;
}
pre .keyword,
pre .javascript .function {
  color: #8959a8;
}
pre {
  color: #525252;
}
pre .function .keyword,
pre .constant {
  color: #0092db;
}
pre .keyword,
pre .attribute {
  color: #e96900;
}
pre .number,
pre .literal {
  color: #ae81ff;
}
pre .tag,
pre .tag .title,
pre .change,
pre .winutils,
pre .flow,
pre .lisp .title,
pre .clojure .built_in,
pre .nginx .title,
pre .tex .special {
  color: #2973b7;
}
pre .symbol,
pre .symbol .string,
pre .value,
pre .regexp {
  color: #42b983;
}
pre .title {
  color: #83b917;
}
pre .tag .value,
pre .string,
pre .subst,
pre .haskell .type,
pre .preprocessor,
pre .ruby .class .parent,
pre .built_in,
pre .sql .aggregate,
pre .django .template_tag,
pre .django .variable,
pre .smalltalk .class,
pre .javadoc,
pre .django .filter .argument,
pre .smalltalk .localvars,
pre .smalltalk .array,
pre .attr_selector,
pre .pseudo,
pre .addition,
pre .stream,
pre .envvar,
pre .apache .tag,
pre .apache .cbracket,
pre .tex .command,
pre .prompt {
  color: #42b983;
}
pre .comment,
pre .java .annotation,
pre .python .decorator,
pre .template_comment,
pre .pi,
pre .doctype,
pre .shebang,
pre .apache .sqbracket,
pre .tex .formula {
  color: #b3b3b3;
}
pre .deletion {
  color: #ba4545;
}
pre .coffeescript .javascript,
pre .javascript .xml,
pre .tex .formula,
pre .xml .javascript,
pre .xml .vbscript,
pre .xml .css,
pre .xml .cdata {
  opacity: 0.5;
}