{"id":1051,"date":"2023-03-12T10:07:59","date_gmt":"2023-03-12T02:07:59","guid":{"rendered":"https:\/\/www.appblog.cn\/?p=1051"},"modified":"2023-04-29T12:39:49","modified_gmt":"2023-04-29T04:39:49","slug":"markdown-css-style","status":"publish","type":"post","link":"https:\/\/www.appblog.cn\/index.php\/2023\/03\/12\/markdown-css-style\/","title":{"rendered":"Markdown CSS\u6837\u5f0f"},"content":{"rendered":"<pre><code class=\"language-html\">&lt;div class=&quot;article&quot; v-html=&quot;compiledMarkdown&quot; v-highlight&gt;&lt;\/div&gt;\n&lt;vue-markdown class=&quot;article&quot; v-highlight :source=&quot;content&quot;&gt;&lt;\/vue-markdown&gt;<\/code><\/pre>\n<p><!-- more --><\/p>\n<pre><code class=\"language-css\">.article {\n  text-align: left;\n  color: #444;\n  padding: 20px 10px;\n  font-size: 14px;\n}\n.article:before,\n.article:after {\n  content: &quot;&quot;;\n  display: table;\n}\n.article:after {\n  clear: both;\n}\n@media screen and (max-width: 479px) {\n  .article {\n    margin: 0;\n  }\n}\n.article p,\n.article table {\n  line-height: 1.6em;\n  margin: 1.6em 0;\n}\n.article h1,\n.article h2,\n.article h3,\n.article h4,\n.article h5,\n.article h6 {\n  font-weight: bold;\n  color: #39aa56;\n  line-height: 1em;\n  margin: 0;\n  padding: 1em 0 0;\n}\n.article h1, .h1 {\n  font-size: 28px;\n}\n.article h2, .h2 {\n  font-size: 24px;\n}\n.article h3, .h3 {\n  font-size: 22px;\n}\n.article h4, .h4 {\n  font-size: 20px;\n}\n.article h5, .h5 {\n  font-size: 18px;\n}\n.article a {\n  color: #0e83cd;\n  text-decoration: none;\n}\n.article a:hover {\n  color: #39aa56;\n  text-decoration: none;\n}\n.article ul,\n.article ol,\n.article dl {\n  margin-top: 1.6em;\n  margin-bottom: 1.6em;\n}\n.article img,\n.article video {\n  max-width: 100%;\n  height: auto;\n  display: block;\n  margin: auto;\n}\n.article iframe {\n  border: none;\n}\n.article table {\n  width: 100%;\n  border-collapse: collapse;\n  border-spacing: 0;\n}\n.article th {\n  font-weight: bold;\n  border-bottom: 3px solid #eef1f8;\n  padding-bottom: 0.5em;\n}\n.article td {\n  border-bottom: 1px solid #eef1f8;\n  padding: 10px 0;\n}\n.article blockquote {\n  padding: 0.1px 20px;\n  font-family: Arial, &quot;open sans&quot;, &quot;Helvetica Neue&quot;, Helvetica Neue, Helvetica, Hiragino Sans GB, Microsoft Yahei, sans-serif;\n  font-size: 1.1em;\n  color: rgba(44,44,44,0.6);\n  margin: 1.4em 0px;\n  border-left: 2px solid #39aa56;\n  background: rgba(208,211,248,0.15);\n}\n.article blockquote p {\n  font-size: 14px;\n  margin: 15px 0;\n}\n.article blockquote footer {\n  font-size: 14px;\n  margin: 1.6em 0;\n  font-family: -apple-system, &quot;Arial&quot;, BlinkMacSystemFont, &quot;Segoe UI&quot;, &quot;Roboto&quot;, &quot;Oxygen&quot;, &quot;Ubuntu&quot;, &quot;Cantarell&quot;, &quot;Fira Sans&quot;, &quot;Droid Sans&quot;, &quot;Helvetica Neue&quot;, sans-serif;\n}\n.article blockquote footer cite:before {\n  content: &quot;\u2014&quot;;\n  padding: 0 0.5em;\n}\n\n.article hr,\n.widget hr {\n  border: 1px dashed #eef1f8;\n}\n.article strong,\n.widget strong {\n  font-weight: bold;\n}\n.article em,\n.widget em,\n.article cite,\n.widget cite {\n  font-style: italic;\n}\n.article sup,\n.widget sup,\n.article sub,\n.widget sub {\n  font-size: 0.75em;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n.article sup,\n.widget sup {\n  top: -0.5em;\n}\n.article sub,\n.widget sub {\n  bottom: -0.2em;\n}\n.article small,\n.widget small {\n  font-size: 0.85em;\n}\n.article acronym,\n.widget acronym,\n.article abbr,\n.widget abbr {\n  border-bottom: 1px dotted;\n}\n.article ul,\n.widget ul,\n.article ol,\n.widget ol,\n.article dl,\n.widget dl {\n  margin: 0 20px;\n  line-height: 1.6em;\n}\n.article ul ul,\n.widget ul ul,\n.article ol ul,\n.widget ol ul,\n.article ul ol,\n.widget ul ol,\n.article ol ol,\n.widget ol ol {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.article ul,\n.widget ul {\n  list-style: circle;\n}\n.article ol,\n.widget ol {\n  list-style: decimal;\n  margin-top: 20px;\n}\n.article dt,\n.widget dt {\n  font-weight: bold;\n}\n.navigater-list&gt;a:hover {\n  color: #39aa56;\n  border-bottom: 5px solid #39aa56;\n  text-decoration: none;\n}\n.hr {\n  background: #39aa56;\n}\n\n.article pre,\n.article .highlight {\n  background: #f8f8f8;\n  margin: 20px 0px;\n  padding: 15px 20px;\n  border-style: solid;\n  border-color: #eef1f8;\n  border-width: 1px 0;\n  overflow: auto;\n  color: #4d4d4c;\n  font-size: 0.9em;\n  line-height: 1em;\n}\n.article .highlight .gutter pre,\n.article .gist .gist-file .gist-data .line-numbers {\n  color: #666;\n  font-size: 0.85em;\n}\nfigure.highlight::-webkit-scrollbar {\n  width: 10px;\n  height: 10px;\n}\nfigure.highlight::-webkit-scrollbar-thumb {\n  border-radius: 5px;\n  -webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0.2);\n  background: rgba(0,0,0,0.1);\n}\nfigure.highlight::-webkit-scrollbar-track {\n  -webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0.2);\n  border-radius: 0;\n  background: rgba(0,0,0,0);\n}\n.article pre,\n.article code {\n  font-family: &quot;Source Code Pro&quot;, Consolas, Monaco, Menlo, Consolas, monospace;\n}\n.article code {\n  background: rgba(208,211,248,0.2);\n  color: #444;\n  padding: 0 0.3em;\n}\n.article pre code {\n  background: none;\n  text-shadow: none;\n  padding: 0;\n}\n.article .highlight pre {\n  border: none;\n  margin: 0;\n  padding: 0;\n}\n.article .highlight table {\n  margin: 0;\n  width: auto;\n}\n.article .highlight td {\n  border: none;\n  padding: 0;\n}\n.article .highlight figcaption {\n  font-size: 0.85em;\n  color: #8e908c;\n  line-height: 1em;\n  margin-bottom: 1em;\n}\n.article .highlight figcaption:before,\n.article .highlight figcaption:after {\n  content: &quot;&quot;;\n  display: table;\n}\n.article .highlight figcaption:after {\n  clear: both;\n}\n.article .highlight figcaption a {\n  float: right;\n}\n.article .highlight .gutter pre {\n  color: #aaa;\n  text-align: right;\n  padding-right: 20px;\n}\n.article .highlight .line {\n  height: 1.7em;\n}\n.article .highlight .line.marked {\n  background: #d6d6d6;\n}\n.article .gist {\n  margin: 0 -20px;\n  border-style: solid;\n  border-color: #eef1f8;\n  border-width: 1px 0;\n  background: #f8f8f8;\n  padding: 15px 20px 15px 0;\n}\n.article .gist .gist-file {\n  border: none;\n  font-family: &quot;Source Code Pro&quot;, Consolas, Monaco, Menlo, Consolas, monospace;\n  margin: 0;\n}\n.article .gist .gist-file .gist-data {\n  background: none;\n  border: none;\n}\n.article .gist .gist-file .gist-data .line-numbers {\n  background: none;\n  border: none;\n  padding: 0 20px 0 0;\n}\n.article .gist .gist-file .gist-data .line-data {\n  padding: 0 !important;\n}\n.article .gist .gist-file .highlight {\n  margin: 0;\n  padding: 0;\n  border: none;\n}\n.article .gist .gist-file .gist-meta {\n  background: #f8f8f8;\n  color: #8e908c;\n  font: 0.85em -apple-system, &quot;Arial&quot;, BlinkMacSystemFont, &quot;Segoe UI&quot;, &quot;Roboto&quot;, &quot;Oxygen&quot;, &quot;Ubuntu&quot;, &quot;Cantarell&quot;, &quot;Fira Sans&quot;, &quot;Droid Sans&quot;, &quot;Helvetica Neue&quot;, sans-serif;\n  text-shadow: 0 0;\n  padding: 0;\n  margin-top: 1em;\n  margin-left: 20px;\n}\n.article .gist .gist-file .gist-meta a {\n  color: #0e83cd;\n  font-weight: normal;\n}\n.article .gist .gist-file .gist-meta a:hover {\n  text-decoration: underline;\n}\npre .comment,\npre .title {\n  color: #8e908c;\n}\npre .variable,\npre .attribute,\npre .tag,\npre .regexp,\npre .ruby .constant,\npre .xml .tag .title,\npre .xml .pi,\npre .xml .doctype,\npre .html .doctype,\npre .css .id,\npre .css .class,\npre .css .pseudo {\n  color: #c82829;\n}\npre .number,\npre .preprocessor,\npre .built_in,\npre .literal,\npre .params,\npre .constant {\n  color: #fb6d19;\n}\npre .class,\npre .ruby .class .title,\npre .css .rules .attribute {\n  color: #718c00;\n}\npre .string,\npre .value,\npre .inheritance,\npre .header,\npre .ruby .symbol,\npre .xml .cdata {\n  color: #718c00;\n}\npre .css .hexcolor {\n  color: #3e999f;\n}\npre .function,\npre .python .decorator,\npre .python .title,\npre .ruby .function .title,\npre .ruby .title .keyword,\npre .perl .sub,\npre .javascript .title,\npre .coffeescript .title {\n  color: #4271ae;\n}\npre .keyword,\npre .javascript .function {\n  color: #8959a8;\n}\npre {\n  color: #525252;\n}\npre .function .keyword,\npre .constant {\n  color: #0092db;\n}\npre .keyword,\npre .attribute {\n  color: #e96900;\n}\npre .number,\npre .literal {\n  color: #ae81ff;\n}\npre .tag,\npre .tag .title,\npre .change,\npre .winutils,\npre .flow,\npre .lisp .title,\npre .clojure .built_in,\npre .nginx .title,\npre .tex .special {\n  color: #2973b7;\n}\npre .symbol,\npre .symbol .string,\npre .value,\npre .regexp {\n  color: #42b983;\n}\npre .title {\n  color: #83b917;\n}\npre .tag .value,\npre .string,\npre .subst,\npre .haskell .type,\npre .preprocessor,\npre .ruby .class .parent,\npre .built_in,\npre .sql .aggregate,\npre .django .template_tag,\npre .django .variable,\npre .smalltalk .class,\npre .javadoc,\npre .django .filter .argument,\npre .smalltalk .localvars,\npre .smalltalk .array,\npre .attr_selector,\npre .pseudo,\npre .addition,\npre .stream,\npre .envvar,\npre .apache .tag,\npre .apache .cbracket,\npre .tex .command,\npre .prompt {\n  color: #42b983;\n}\npre .comment,\npre .java .annotation,\npre .python .decorator,\npre .template_comment,\npre .pi,\npre .doctype,\npre .shebang,\npre .apache .sqbracket,\npre .tex .formula {\n  color: #b3b3b3;\n}\npre .deletion {\n  color: #ba4545;\n}\npre .coffeescript .javascript,\npre .javascript .xml,\npre .tex .formula,\npre .xml .javascript,\npre .xml .vbscript,\npre .xml .css,\npre .xml .cdata {\n  opacity: 0.5;\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>&lt;div class=&quot;article&quot; v-html=&quot;compiled [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[33],"tags":[85,170],"class_list":["post-1051","post","type-post","status-publish","format-standard","hentry","category-frontend-basic","tag-css","tag-markdown"],"_links":{"self":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/1051","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/comments?post=1051"}],"version-history":[{"count":0,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/1051\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/media?parent=1051"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/categories?post=1051"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/tags?post=1051"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}