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


  • 2020-05-24 08:10:18

    echarts标题(title)配置

    show:true,//显示策略,默认值true,可选为:true(显示) | false(隐藏) text: '主标题',//主标题文本,'\n'指定换行 link:'',//主标题文本超链接,默认值true target: null,//指定窗口打开主标题超链接,支持'self' | 'blank',不指定等同为'blank'(新窗口) subtext: '副标题',//副标题文本,'\n'指定换行 sublink: '',//副标题文本超链接

  • 2020-06-02 08:57:12

    clipboard复制成功但是粘贴板是空的

    将文本复制到剪贴板应该不难。配置它不需要几十个步骤,也不需要加载数百KB的js文件 。但最重要的是,它不应该依赖Flash或任何臃肿的框架。这就是clipboard.js存在的原因。