CSS让markdown更迷人！！

juniz · #1

markdow就不用多介绍了。

本人是用通过pandoc，将markdown文件转换为html文件

默认设置下，转换成html文件后，标题、列表、表格、强调等各种格式比较单一。

其实，研究了html源文件后，各种标签都是可以通过CSS自定义的。

安装pandoc，并写好css文件后，只需要一条命令，就可以一键生成html(点击查看效果)，让markdown更加丰富迷人：

代码：全选

pandoc -H pandoc.css help.md -o help.html

截图：

markdowncss.zip: (11.18 KiB) 已下载 115 次

如果你喜欢写博客，还想免费搭建一个属于自己的博客空间。

那么github是一个不错的选择，只需运行git push 命令，本地和网络博客立刻同步。

juniz · #2

pandoc.css文件：

代码：全选

<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport">
<title>XX博客</title>
<!--
<base target="_blank">
-->
<style type="text/css">

  html {
       /*background-image: url(./img/background.png) !important;
        background-repeat: repeat;*/
       background:#B3A9DB;
        background-size: 100% auto;
  }

body {
    /*background-image: url(./img/bodybackground.png) ;*/
    background-repeat: no-repeat;
    background-size: 100% 6em;
    /*background-size: cover;*/
    background-image:-webkit-linear-gradient(to top, #AE9DEC,#0E064D);
     background-image:linear-gradient(to top, #AE9DEC,#0E064D);
    margin: auto;
    margin-top: 0em;
    margin-bottom: 0.5em;
    padding: 1em 0.5em 1em 0.5em;
    width: auto;
    border: 1px solid  #CED7EA;
    color: black;
    font-family: Verdana, sans-serif;
    font-size: 100%;
    line-height: 140%;
    background-color:#FAFAFA;
    box-shadow: 0px 0px 10px black;
}

/*==============-代码==============*/
pre {
       white-space: pre;
	background: rgba(117, 119, 131, 0.6);
	color: #000;
      margin: 10px 0px;
      padding: 0.5em 0em;
	border-radius: 3px;
	background-clip: padding-box;
	font-family: Monaco,"DejaVu Sans Mono","Courier New",monospace;
	overflow: auto;
      word-wrap:break-word;
     text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
}
pre:before{
      content: "CODE";
      display:block;
      background-color: #B7B7B7;
      color: #222;
      box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5) inset, 0px 1px 5px rgba(0, 0, 0, 0.5);
      text-shadow: 0px 1px 0px #FFF;
      border: 1px solid #8D897A;
      position: relative;
      margin: 0 auto;
      padding: 0.1em 0.3em ;
      font-size: 80%;
      border-radius: 3px;
      font: inherit;
      vertical-align: baseline;
      font-style: normal;
     top: -0.6em;
     left: 0em;
}

code {
    font-family: monospace;
}

dt code,p code,blockquote code,table code,li code {
      padding: 0px 5px 2px;
      border: 1px solid #DDD;
      border-radius: 3px;
      background-clip: padding-box;
      font-family: Monaco,"DejaVu Sans Mono","Courier New",monospace;
      font-size: 13px;
      color: #666;
}
/*==============-链接a==============*/

a { 
    text-decoration: none;
  }

a:hover
{
        border:1px solid rgb(160, 152, 213);
        border-radius: 4px;
}

/*==============-标题h1~h6==============*/

h1 a, h2 a, h3 a, h4 a, h5 a { 
color: #013A72;
  }

h1:before,h2:before, h3:before, h4:before { 
content: "::";
color: #FF1D1D;
text-shadow: 0px 1px 0px #5EC1C9;
font-weight: bold;
  }

 h2, h3, h4 { 
	       border-bottom: 1px solid #DDD;
}

h1 {
        font-size: 140%;
        text-align: center;
        background-color: #5EC1C9;
       content: "标题";
      color: #222;
      box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5) inset, 0px 1px 5px rgba(0, 0, 0, 0.5);
      text-shadow: 0px 1px 0px #FFF;
      border: 1px solid #8D897A;
      position: relative;
      margin: 0 auto;
      padding: 0.5em ;
      border-radius: 3px;
      font: inherit;
      vertical-align: baseline;
      font-weight: bold;
     top: 0em;
     left: 0em;
}

h2 {
        font-size: 120%;
}

h3 {
        font-size: 100%;
}

h4 {
        font-size: 90%;
}

h5,h5 a{
        font-size: 150%;
        text-align: center;
       text-shadow: -2px -2px 3px #BDB1FC;
}

h6,h6 a {
color: #FBCB00;
    font-size: 110%;
    text-align: left;
}
/*h7无效!!!!*/

h1.title {
      font-size: 200%;
      color: #FFF;
      text-shadow: 1px 1px 3px #000;
      }

h2.author {
    text-align: right;
    font-weight: normal;
}

h3.date {
        text-align: right;
       font-weight: normal;
}


/*dl列表dd内容的段落样式　*/
dd p {
        margin-top: 0;
        background-color: #ECF5EB;
}

#footer {
      padding-top: 1em;
      font-size: 70%;
      color: gray;
      text-align: center;
}

em {
   color:green;
}

strong  {
  /*color:#8A6D3B; */
}

img {
    display:block; 
    margin:0 auto;
    padding-top: 0em;
    padding-left: 0em;
    float:center;
    max-width: 100%; 
    /*box-shadow: 6px -6px 1px gray;*/
    border-radius: 4px;
}

/*==============-引用==============*/
blockquote {
      position: relative;
      margin: 10px 0px;
      padding: 0.5em 0em;
      font-size: 95%;
      color: #264C72;
      border: 1px solid #97C1DA;
      border-radius: 3px;
      background: linear-gradient(#D8EBF8, #D0E3EF) repeat scroll 0% 0% transparent;
      box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
      text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
}
blockquote:before {
      content: "QUOTE";
      display:block;
      background-color: #8EBFCC;
      color: #222;
      box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5) inset, 0px 1px 5px rgba(0, 0, 0, 0.5);
      text-shadow: 0px 1px 0px #FFF;
      border: 1px solid #8D897A;
      position: relative;
      margin: 0 auto;
      padding: 0.1em 0.3em ;
      font-size: 80%;
      border-radius: 3px;
      font: inherit;
      vertical-align: baseline;
      font-style: normal;
     top: -0.6em;
     left: 0em;
}

/*==============-表格和列表==============*/

table {
      color: #613A00;
      background: linear-gradient(#FFE3C8, #F5DAC0) repeat scroll 0% 0% transparent;
      border: 1px solid #DCA874;
      position: relative;
      margin: 0px auto;
      padding: 0 ;
      font-size: 95%;
      border-radius: 3px;
      box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
      text-shadow: 0px 1px 0px #FFF;
      font: inherit;
      vertical-align: baseline;
}

thead {
      /*表头*/
  /*color:#CC5A25;
  background-color: #FFBD73;*/
}

tbody {
        /*表体*/
   /* background:yellow;*/
}

tr {
  /*行  无效 */
   /*  border:4px solid black;*/
}

table tr td {
  /*border: 1px solid #e6e6e6;*/
}

table tr:nth-child(2n) {
  background-color: #FAFAFA;
}

td {
    /*单元格 */
   /*  border:1px solid green;*/
}

ol {
       /*有序列表*/
    list-style-type: decimal;
    border-radius: 4px;
  }
  
li {
  /*列表子项目*/
  color:black;
}

ul {
   text-decoration: none;
} 


/*==============-适应手机屏幕==============*/

@media screen and (max-width: 736px) {
    body {
      width: auto;
      border: none;
    }
  }

  @media screen and (min-width: 737px) and (max-width: 1220px) {
    body {width: 97%;
    }
  }

    @media screen and (min-width: 1221px) {
    body {width: 1024px;
        }
  }


/*
iPhone 4 3.5吋 320x480
iPhone 5 4.0吋 320x568
iPhone 6 4.7吋 375x667
iPhone 6+ 5.5吋 414x736
*/

/*==============-以下是html div样式==============*/

/*==============-----强调strong里的============================----------*/
strong code {
      color: #FFF;
      background: #BC6715;
      border: 1px solid #BC7937;
      position: relative;
      margin: 0 auto;
      padding: 0.1em 0.3em ;
      font-size: 80%;
      border-radius: 3px;
      box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5) inset, 0px 1px 5px rgba(0, 0, 0, 0.5);
      text-shadow: 0px 1px 0px #000;
      font: inherit;
      vertical-align: baseline;
}

strong sup {
      color: #FFF;
      background: green;
      border: 1px solid #01680E;
      position: relative;
      margin: 0 auto;
      padding: 0.1em 0.3em ;
      font-size: 80%;
      border-radius: 3px;
      box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5) inset, 0px 1px 5px rgba(0, 0, 0, 0.5);
      text-shadow: 0px 1px 0px #000;
      font: inherit;
      vertical-align: baseline;
}



strong sub {
      color: #FFF;
      background: rgba(255, 125, 0, 0.98);
      border: 1px solid #BC7937;
      position: relative;
      margin: 0 auto;
      padding: 0.1em 0.3em ;
      font-size: 80%;
      border-radius: 3px;
      box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5) inset, 0px 1px 5px rgba(0, 0, 0, 0.5);
      text-shadow: 0px 1px 0px #000;
      font: inherit;
      vertical-align: baseline;
}

/*==============-----斜体em里的============================----------*/
em code {
background-color: #F6C986;
color: #004401;
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5) inset, 0px 1px 5px rgba(0, 0, 0, 0.5);
text-shadow: 0px 1px 0px #FFF;
border: 1px solid #C6B059;
      position: relative;
      margin: 0 auto;
      padding: 0.1em 0.3em ;
      font-size: 80%;
      border-radius: 3px;
      font: inherit;
      vertical-align: baseline;
      font-style: normal;
}

em sub {
background-color: #F6F586;
font-style: normal;
color: #000;
font-size: 100%;
     /* box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5) inset, 0px 1px 5px rgba(0, 0, 0, 0.5);
      text-shadow: 0px 1px 0px #FFF;
      border: 1px solid  #FC0;
      position: relative;
      margin: 0 auto;
      padding: 0.1em 0.3em ;
      border-radius: 3px;
      font: inherit;
      vertical-align: baseline;*/
}

em strong , strong em {
background-color: #EF0000;
color: #FFF;
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5) inset, 0px 1px 5px rgba(12, 0, 0, 0.94);
text-shadow: 0px 1px 0px #000;
border: 1px solid #D24722;
      position: relative;
      margin: 0 auto;
      padding: 0.1em 0.3em ;
      font-size: 80%;
      border-radius: 3px;
      font: inherit;
      vertical-align: baseline;
      font-style: normal;
}

em sup {
background-color: #4DBD30;
color: #E7FF00;
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5) inset, 0px 1px 5px rgba(0, 0, 0, 0.5);
text-shadow: 0px 1px 0px #000;
border: 1px solid #2992B4;
      position: relative;
      margin: 0 auto;
      padding: 0.1em 0.3em ;
      font-size: 80%;
      border-radius: 3px;
      font: inherit;
      vertical-align: baseline;
      font-style: normal;
}

/*==============-----下标sub里的============================----------*/
sub code {
      background-color: #E9CC5C;
      color: #222;
      box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5) inset, 0px 1px 5px rgba(0, 0, 0, 0.5);
      text-shadow: 0px 1px 0px #FFF;
      border: 1px solid  #FC0;
      position: relative;
      margin: 0 auto;
      padding: 0.1em 0.3em ;
      font-size: 80%;
      border-radius: 3px;
      font: inherit;
      vertical-align: baseline;
}

sub strong  {
color: #00500F;
background: none repeat scroll 0% 0% #FFB18C;
border: 1px solid #B7814B;
position: relative;
margin: 0px auto;
padding: 0.1em 0.3em;
border-radius: 3px;
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5) inset, 0px 1px 5px rgba(0, 0, 0, 0.5);
text-shadow: 0px 1px 0px #FFF;
      font: inherit;
      vertical-align: baseline;
}

sub em {
      color: #E8E2FF;
background: #C700E6;
border: 1px solid #B600D1;
      position: relative;
      margin: 0 auto;
      padding: 0.1em 0.3em ;
      font-size: 80%;
      border-radius: 3px;
      box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5) inset, 0px 1px 5px rgba(0, 0, 0, 0.5);
      text-shadow: 0px 1px 0px #000;
      font: inherit;
      vertical-align: baseline;
}

sub sup {
color: #31226C;
background: none repeat scroll 0% 0% #15D3E1;
border: 1px solid #0CAFB6;
position: relative;
margin: 0px auto;
padding: 0.1em 0.3em;
border-radius: 3px;
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5) inset, 0px 1px 5px rgba(0, 0, 0, 0.5);
text-shadow: 0px 1px 0px #FFF;
      font: inherit;
      vertical-align: baseline;
}

sub sub {
    color: #240505;
    background: none repeat scroll 0% 0% #D7D5D4;
    border: 1px solid #A1978D;
    position: relative;
    margin: 0px auto;
    padding: 0.1em 0.3em;
    border-radius: 3px;
    box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5) inset, 0px 1px 5px rgba(0, 0, 0, 0.5);
    text-shadow: 0px 1px 0px #FFF;
    font: inherit;
    vertical-align: baseline;
}

del sup{
  font-size: 80%;
}
/*三者组合的*/
sub strong code {
background-color: #FFF;
color: #222;
      box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5) inset, 0px 1px 5px rgba(0, 0, 0, 0.5);
      text-shadow: 0px 1px 0px #FFF;
      border: 1px solid  #FC0;
      position: relative;
      margin: 0 auto;
      padding: 0.1em 0.3em ;
      font-size: 80%;
      border-radius: 3px;
      font: inherit;
      vertical-align: baseline;
}


/*==============-----上标sup里的============================---------*/
.warning h6,sup h6,sup a:hover{
    line-height: 1.5em;
    font-style: normal;
    margin: 0em 1em;
    border:none;
}
/*sup>code*/

.title,sup code{
    padding: 1em 4em;
    margin: 0em;
    border-radius: 5px;
    position: relative;
    box-shadow: 0px 1px 5px rgba(240, 198, 198, 0.3), 0px 1px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px rgba(0, 0, 0, 0.3) inset;
    border-color: transparent #6E5E3C #6C5C3B transparent;
    color: #FFF;
    background-image: linear-gradient(to bottom, #D1AF1D 0%, #7D6822 100%);
}

.title{
   padding: 0.5em 0em;
    margin: 0em;
    border-radius: 5px;
    position: relative;
    box-shadow: 0px 1px 5px rgba(240, 198, 198, 0.3), 0px 1px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px rgba(0, 0, 0, 0.3) inset;
    border-color: transparent #6E5E3C #6C5C3B transparent;
    color: #FFF;
    background-image: linear-gradient(to bottom, #352B96 0%, #01DAD2 100%);
}

sup code:after {
    content: "✎";
color: #FFF;
position: absolute;
top: 0em;
left: 0.5em;
font-size: 2.3em;
}

/*.title:before,sup code:before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0px;
    border-color: transparent #7E6832 #7E6832 transparent;
    border-style: solid;
    border-width: 5px;
    width: 0px;
    height: 0px;
}
*/

/*sup>em*/
sup em {
    padding: 1em 4em;
    margin: 0em;
    border-radius: 5px;
    position: relative;
    box-shadow: 0px 1px 5px rgba(240, 198, 198, 0.3), 0px 1px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px rgba(0, 0, 0, 0.3) inset;
    border-color: transparent #6E5E3C #6C5C3B transparent;
    color: #FFF;
    background-image: linear-gradient(to bottom, #0389AA 0%, #00617F 100%);
    font-style: normal;
}

sup em:after{
    content: " ☑";
color: #FFF;
position: absolute;
top: 0em;
left: 0.5em;
font-size: 2.3em;
}


/*-sup>strong-*/

sup strong,.warning {
    padding: 1em 4em;
    margin: 0em;
    border-radius: 5px;
    position: relative;
    box-shadow: 0px 1px 5px rgba(240, 198, 198, 0.3), 0px 1px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px rgba(0, 0, 0, 0.3) inset;
    border-color: transparent #6E5E3C #6C5C3B transparent;
    color: #FFF;
    background-image: linear-gradient(to bottom, #9E2812 0%, #6F0D0D 100%);
}
sup strong:after,.warning:after {
    content: "☠";
color: #FFF;
position: absolute;
top: 0em;
left: 0.5em;
font-size: 2.3em;
}


/*sup>sup/sub-*/

sup sup,sup sub {
      margin: 0 auto;
      padding: 0.1em 0.3em ;
      font-size: 90%;
}

sup sup:before {
      content: "★ WANRING";
display: block;
background-color: #ECD801;
color: #000;
box-shadow: 0px 1px 0px rgba(254, 224, 0, 0.5) inset, 0px 1px 5px rgba(0, 0, 0, 0.5);
text-shadow: 0px 1px 0px #FFF;
border: 1px solid #D7A900;
      position: relative;
      margin: 0 auto;
      padding: 0.1em 0.3em ;
      font-size: 100%;
      border-radius: 3px;
      font: inherit;
      vertical-align: baseline;
      font-style: normal;
     top: -0.6em;
     left: 0em;
    font-weight: bold;
}

sup sup:after {
    content: "☠";
    color: #FB3131;
    position: relative;
    left: 14px;
    font-size: 28px;
    font-weight: 10em;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5);
    top: 14px;
}

sup sub:before {
      content: "✍ NOTE ";
display: block;
background-color: #1BA500;
color: #FCF003;
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5) inset, 0px 1px 5px rgba(5, 146, 52, 0.5);
text-shadow: 0px 1px 0px #000;
border: 1px solid #288416;
      position: relative;
      margin: 0 auto;
      padding: 0.1em 0.3em ;
      font-size: 100%;
      border-radius: 3px;
      font: inherit;
      vertical-align: baseline;
      font-style: normal;
     top: -0.6em;
     left: 0em;
     font-weight: bold;
}

sup sub:after {
    content: "✿ ";
    color: #04AA1E;
    position: relative;
    left: 14px;
    font-size: 28px;
    font-weight: 10em;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5);
    top: 14px;
}

</style>

eexpress · #3

▶ wc -l bin/lighttpd/mkd.css
116 bin/lighttpd/mkd.css

可以自己维护一个小的。

eagle5678 · #4

CSS让markdown更迷人！！

CSS让markdown更迷人！！

Re: CSS让markdown更迷人！！

Re: CSS让markdown更迷人！！

Re: CSS让markdown更迷人！！