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;
}


  • 2021-01-21 13:52:36

    node.js使用Nodemailer发送邮件

    常常看到一些网站有邮箱获取验证码验证注册或者修改密码等,今天也来了解一下在nodejs + express怎么发送电子邮件。使用模块Nodemailer。这里以qq邮箱举例子。

  • 2021-01-21 13:55:53

    Mongodb字段更新$unset操作符

    当使用$操作符匹配任何数组元素,$unset替换指定的元素为null而不是删除掉指定的元素,此行为保持数组大小和位置一直;

  • 2021-01-22 08:30:02

    Android IO简化之Okio库

    如果之前有使用过Okhttp,那么你一定知道底层的IO读取是由square公司开发的Okio库。它补充了Java.io和java.nio的不足,以便能够更加方便,快速的访问、存储和处理你的数据。而在一般的开发中,我们也可以使用Okio来做IO读写,非常方便深得我心

  • 2021-01-22 21:56:48

    emcc生成wasm,wast,bc文件的方法

    Emscripten实现把C/C++文件转成wasm,wast(wasm的可读形式),llvm字节码(bc格式),ll格式(llvm字节码的可读形式)的步骤。

  • 2021-01-22 21:59:34

    emcc编译与部分重要参数选取

    C/C++代码通过emcc编译为字节码,然后根据不同的目标编译为asm.js或wasm。emcc和gcc编译选项类似,例如-s OPTIONS=VALUE、-O等。另外为了适应Web环境,emcc增加了一些特有的选项,如–pre-js 、–post-js 等。

  • 2021-01-22 22:01:19

    Emscripten Compiler Frontend (emcc)

    The Emscripten Compiler Frontend (emcc) is used to call the Emscripten compiler from the command line. It is effectively a drop-in replacement for a standard compiler like gcc or clang.