Markdown的css样式

2020-03-05 13:12:54

参考地址 分享一款Markdown的css样式

目录

 

使用

本样式在这个样式的基础上做了一些修改, 主要是对于表格和代码块以及一些细节的修改。 主要目的是用在chrome的扩展 Markdown Preview Plus中, 替换其内置的样式。 由于 Markdown Preview Plus对css文件大大小有要求(小于8K), 所以需要使用压缩后的 css 文件。 当然也可以作为一个单独的markdown样式来使用。

导出html

Markdown Preview Plus 提供了导出 html 的功能,不过导出后的格式是 xhtml,可以去 这里 下载转换工具,将 xhtml 转为html。 如果运行转换工具时报下面的错误

./mht2htm: error while loading shared libraries: libgdk_pixbuf-2.0.so.0: cannot open shared object file: No such file or directory

只要运行下面的命令即可

sudo apt-get install libgtk2.0-0:i386

预览该样式

中文
英文

源码

下面给出css的源码,这里是github地址。

body{    margin: 0 auto;    font-family: "Microsoft YaHei", arial,sans-serif;    color: #444444;    line-height: 1;    padding: 30px;
}
@media screen and (min-width: 768px) {    body {        width: 748px;        margin: 10px auto;
    }
}h1, h2, h3, h4 {    color: #111111;    font-weight: 400;    margin-top: 1em;
}h1, h2, h3, h4, h5 {    font-family: Georgia, Palatino, serif;
}h1, h2, h3, h4, h5, p , dl{    margin-bottom: 16px;    padding: 0;
}h1 {    font-size: 48px;    line-height: 54px;
}h2 {    font-size: 36px;    line-height: 42px;
}h1, h2 {    border-bottom: 1px solid #EFEAEA;    padding-bottom: 10px;
}h3 {    font-size: 24px;    line-height: 30px;
}h4 {    font-size: 21px;    line-height: 26px;
}h5 {    font-size: 18px;    list-style: 23px;
}a {    color: #0099ff;    margin: 0;    padding: 0;    vertical-align: baseline;
}a:hover {    text-decoration: none;    color: #ff6600;
}a:visited {    /*color: purple;*/}ul, ol {    padding: 0;    padding-left: 24px;    margin: 0;
}li {    line-height: 24px;
}p, ul, ol {    font-size: 16px;    line-height: 24px;
}ol ol, ul ol {    list-style-type: lower-roman;
}/*pre {
    padding: 0px 24px;
    max-width: 800px;
    white-space: pre-wrap;
}
code {
    font-family: Consolas, Monaco, Andale Mono, monospace;
    line-height: 1.5;
    font-size: 13px;
}*/code, pre {    border-radius: 3px;    background-color:#f7f7f7;    color: inherit;
}code {    font-family: Consolas, Monaco, Andale Mono, monospace;    margin: 0 2px;
}pre {    line-height: 1.7em;    overflow: auto;    padding: 6px 10px;    border-left: 5px solid #6CE26C;
}pre > code {    border: 0;    display: inline;    max-width: initial;    padding: 0;    margin: 0;    overflow: initial;    line-height: inherit;    font-size: .85em;    white-space: pre;    background: 0 0;

}code {    color: #666555;
}/** markdown preview plus 对于代码块的处理有些问题, 所以使用统一的颜色 *//*code .keyword {
  color: #8959a8;
}

code .number {
  color: #f5871f;
}

code .comment {
  color: #998
}*/aside {    display: block;    float: right;    width: 390px;
}blockquote {    border-left:.5em solid #eee;    padding: 0 0 0 2em;    margin-left:0;
}blockquote  cite {    font-size:14px;    line-height:20px;    color:#bfbfbf;
}blockquote cite:before {    content: '\2014 \00A0';
}blockquote p {    color: #666;
}hr {    text-align: left;    color: #999;    height: 2px;    padding: 0;    margin: 16px 0;    background-color: #e7e7e7;    border: 0 none;
}dl {    padding: 0;
}dl dt {    padding: 10px 0;    margin-top: 16px;    font-size: 1em;    font-style: italic;    font-weight: bold;
}dl dd {    padding: 0 16px;    margin-bottom: 16px;
}dd {    margin-left: 0;
}/* Code below this line is copyright Twitter Inc. */button,input,select,textarea {    font-size: 100%;    margin: 0;    vertical-align: baseline;
    *vertical-align: middle;
}button, input {    line-height: normal;
    *overflow: visible;
}button::-moz-focus-inner, input::-moz-focus-inner {    border: 0;    padding: 0;
}button,input[type="button"],input[type="reset"],input[type="submit"] {    cursor: pointer;    -webkit-appearance: button;
}input[type=checkbox], input[type=radio] {    cursor: pointer;
}/* override default chrome & firefox settings */input:not([type="image"]), textarea {    -webkit-box-sizing: content-box;    -moz-box-sizing: content-box;    box-sizing: content-box;
}input[type="search"] {    -webkit-appearance: textfield;    -webkit-box-sizing: content-box;    -moz-box-sizing: content-box;    box-sizing: content-box;
}input[type="search"]::-webkit-search-decoration {    -webkit-appearance: none;
}label,input,select,textarea {    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;    font-size: 13px;    font-weight: normal;    line-height: normal;    margin-bottom: 18px;
}input[type=checkbox], input[type=radio] {    cursor: pointer;    margin-bottom: 0;
}input[type=text],input[type=password],textarea,select {    display: inline-block;    width: 210px;    padding: 4px;    font-size: 13px;    font-weight: normal;    line-height: 18px;    height: 18px;    color: #808080;    border: 1px solid #ccc;    -webkit-border-radius: 3px;    -moz-border-radius: 3px;    border-radius: 3px;
}select, input[type=file] {    height: 27px;    line-height: 27px;
}textarea {    height: auto;
}/* grey out placeholders */:-moz-placeholder {    color: #bfbfbf;
}::-webkit-input-placeholder {    color: #bfbfbf;
}input[type=text],input[type=password],select,textarea {    -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;    -moz-transition: border linear 0.2s, box-shadow linear 0.2s;    transition: border linear 0.2s, box-shadow linear 0.2s;    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);    -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}input[type=text]:focus, input[type=password]:focus, textarea:focus {    outline: none;    border-color: rgba(82, 168, 236, 0.8);    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);    -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
}/* buttons */button {    display: inline-block;    padding: 4px 14px;    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;    font-size: 13px;    line-height: 18px;    -webkit-border-radius: 4px;    -moz-border-radius: 4px;    border-radius: 4px;    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);    background-color: #0064cd;    background-repeat: repeat-x;    background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));    background-image: -moz-linear-gradient(top, #049cdb, #0064cd);    background-image: -ms-linear-gradient(top, #049cdb, #0064cd);    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));    background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);    background-image: -o-linear-gradient(top, #049cdb, #0064cd);    background-image: linear-gradient(top, #049cdb, #0064cd);    color: #fff;    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);    border: 1px solid #004b9a;    border-bottom-color: #003f81;    -webkit-transition: 0.1s linear all;    -moz-transition: 0.1s linear all;    transition: 0.1s linear all;    border-color: #0064cd #0064cd #003f81;    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}button:hover {    color: #fff;    background-position: 0 -15px;    text-decoration: none;
}button:active {    -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);    -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);    box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}button::-moz-focus-inner {    padding: 0;    border: 0;
}table {
    *border-collapse: collapse; /* IE7 and lower */
    border-spacing: 0;    width: 100%;
}table {    border: solid #ccc 1px;    -moz-border-radius: 6px;    -webkit-border-radius: 6px;    border-radius: 6px;    /*-webkit-box-shadow: 0 1px 1px #ccc;
    -moz-box-shadow: 0 1px 1px #ccc;
    box-shadow: 0 1px 1px #ccc;   */}table tr:hover {    background: #fbf8e9;    -o-transition: all 0.1s ease-in-out;    -webkit-transition: all 0.1s ease-in-out;    -moz-transition: all 0.1s ease-in-out;    -ms-transition: all 0.1s ease-in-out;    transition: all 0.1s ease-in-out;
}table td, .table th {    border-left: 1px solid #ccc;    border-top: 1px solid #ccc;    padding: 10px;    text-align: left;
}table th {    background-color: #dce9f9;    background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));    background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);    background-image:    -moz-linear-gradient(top, #ebf3fc, #dce9f9);    background-image:     -ms-linear-gradient(top, #ebf3fc, #dce9f9);    background-image:      -o-linear-gradient(top, #ebf3fc, #dce9f9);    background-image:         linear-gradient(top, #ebf3fc, #dce9f9);    /*-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;*/
    border-top: none;    text-shadow: 0 1px 0 rgba(255,255,255,.5);    padding: 5px;
}table td:first-child, table th:first-child {    border-left: none;
}table th:first-child {    -moz-border-radius: 6px 0 0 0;    -webkit-border-radius: 6px 0 0 0;    border-radius: 6px 0 0 0;
}table th:last-child {    -moz-border-radius: 0 6px 0 0;    -webkit-border-radius: 0 6px 0 0;    border-radius: 0 6px 0 0;
}table th:only-child{    -moz-border-radius: 6px 6px 0 0;    -webkit-border-radius: 6px 6px 0 0;    border-radius: 6px 6px 0 0;
}table tr:last-child td:first-child {    -moz-border-radius: 0 0 0 6px;    -webkit-border-radius: 0 0 0 6px;    border-radius: 0 0 0 6px;
}table tr:last-child td:last-child {    -moz-border-radius: 0 0 6px 0;    -webkit-border-radius: 0 0 6px 0;    border-radius: 0 0 6px 0;
}


  • 2018-01-17 01:55:49

    Android设置控件不可点击

    学会安卓控件的不可点击,再加上控件的透明度,估计你会做出不错的效果来。

  • 2018-01-17 15:58:16

    java实现定时任务的三种方法

    在进行多线程编程中,比较重要也是比较困难的一个操作就是如何获取线程中的信息。大多数人会采取比较常见的一种方法就是将线程中要返回的结果存储在一个字段中,然后再提供一个获取方法将这个字段的内容返回给该方法的调用者。如以下的ReturnThreadInfo类: