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-11-01 22:08:19

    Android Toolbar左、中、右对齐

    默认的Android Toolbar中添加子元素view是从左到右依次添加。需要注意的是,Android Toolbar为自身的NavigationIcon(app:navigationIcon)最靠右,Logo(app:logo)紧接NavigationIcon、Title(app:title)接续Logo、保留了默认的位置(从左边到右)。这些Android Toolbar保留的系统设置字段将挤压开发者自己安放在Toolbar中的子view,如图所示:

  • 2018-11-06 06:42:59

    XUtils3框架数据库的基本使用方法

    今天给大家带来数据库模块的讲解,现在主流的ORM框架很多,比如OrmLite,GreenDao,Active Android,Realm等等,这些框架每个都有自己的优点和缺点,大家完全可以根据自己项目的实际需求进行选择,下面开始进入今天的数据库模块的介绍。