org-mode 写cnblogs 博文(一些问题的解决)

在上一篇博客里面列举了很多用org-mode写cnblogs后引起的问题。发现很多都是因为css的问题。

cnblogs中有多处css都会影响最后的显示效果：模板的common.css,博文嵌入html代码中的style片段，还有管理->设置里面的自定义css代码。

欣赏了cnblogs上一些博友的页面，研究了一下。现在能够比较好地展现用org-mode导出的html页面了。

在这里也做下记录： org-mode导出时候选择的变量org-export-html-style-default中包含了pre.而管理–>设置里面的自定义css代码的优先级比内嵌在html中的css代码低。所以我把org-export-html-style-default中的关于pre部分的代码去掉了。对org-export-html-style-default进行了重新赋值，代码如下：

(defconst org-export-html-style-default
"<style type=\"text/css\">
 <!--/*--><![CDATA[/*><!--*/
  html { font-family: Times, serif; font-size: 12pt; }
  .title  { text-align: center; }
  .todo   { color: red; }
  .done   { color: green; }
  .tag    { background-color: #add8e6; font-weight:normal }
  .target { }
  .timestamp { color: #bebebe; }
  .timestamp-kwd { color: #5f9ea0; }
  .right  {margin-left:auto; margin-right:0px;  text-align:right;}
  .left   {margin-left:0px;  margin-right:auto; text-align:left;}
  .center {margin-left:auto; margin-right:auto; text-align:center;}
  p.verse { margin-left: 3% }
  table { border-collapse: collapse; }
  td, th { vertical-align: top;  }
  th.right  { text-align:center;  }
  th.left   { text-align:center;   }
  th.center { text-align:center; }
  td.right  { text-align:right;  }
  td.left   { text-align:left;   }
  td.center { text-align:center; }
  dt { font-weight: bold; }
  div.figure { padding: 0.5em; }
  div.figure p { text-align: center; }
  div.inlinetask {
    padding:10px;
    border:2px solid gray;
    margin:10px;
    background: #ffffcc;
  }
  textarea { overflow-x: auto; }
  .linenr { font-size:smaller }
  .code-highlighted {background-color:#ffff00;}
  .org-info-js_info-navigation { border-style:none; }
  #org-info-js_console-label { font-size:10px; font-weight:bold;
                               white-space:nowrap; }
  .org-info-js_search-highlight {background-color:#ffff00; color:#000000;
                                 font-weight:bold; }
  /*]]>*/-->
</style>"
  "The default style specification for exported HTML files.
Please use the variables `org-export-html-style' and
`org-export-html-style-extra' to add to this style.  If you wish to not
have the default style included, customize the variable
`org-export-html-style-include-default'.")

cnblogs后台->管理->设置中的自定义css代码记录如下:(本页面的显示效果)

BODY {
  margin: 0px 50px 50px 55px;
  PADDING-left: 40px;
  padding-right: 40px;
  BACKGROUND: #f9f9ee; 
  COLOR: #000000; 
  FONT: 14px/1.4 'Trebuchet MS',Verdana, Arial, Helvetica, sans-serif;
  line-height: 1.8;
  background-image:  url(http://images.cnblogs.com/cnblogs_com/csophys/368957/r_bg.gif);
  background-repeat: repeat-y;
/*  text-align: justify;*/
}


A {
  font-weight: bold;
  font-family: Verdana;
  /*color: #00008b;*/
  color: #c00;
  TEXT-DECORATION: none;
}

A:hover {
/*  BACKGROUND: #fff;
    color: #fff;
    BORDER: #c00  1px dashed;
  TEXT-DECORATION: UNDERLINE OVERLINE; 
  COLOR: #c00; 
    background: #ffe7e7; */
    color: blue;
}
/*
H1 A {
  COLOR: #ff3300
}

H2 A {
  COLOR: #ff3300
}

H3 A {
  COLOR: #ff3300
}

H4 A {
  COLOR: #ff3300
}
*/
H1{
  margin-top: 0px; 
  margin-left: -100px;
  margin-right: -40px;
  text-align: center;
  padding: 22px 0px 16px 60px;
  font-family: georgia, "Trebuchet MS";
  FONT-WEIGHT: bolder;
  COLOR: #004f37;
  /*Border-bottom: #004f37 2px solid;
  Border-left-width: 6px;*/
  /*background: #d9e7e2 url(http://images.cnblogs.com/cnblogs_com/csophys/368957/r_sky.png) 
*/
repeat-x;
  font-size: 30px;
  line-height: 1;  
}

H2 {
  margin-left: -35px;
  margin-right: 0px;
  margin-top: 50pt;
  PADDING: 3px 0px 3px 10px; 
/*  COLOR: #005a9c;
  COLOR: #f63811;
  COLOR: #c61a02; */ 
  COLOR: #005a9c;
  font-family: georgia, "Trebuchet MS";
  FONT-WEIGHT: BOLD;
  font-size: 20px;
/*  BORDER-BOTTOM: #005a9c 1px solid;*/
  BORDER: #005a9c 1px solid; 
  BORDER-LEFT: #005a9c 6px solid; 
/*  Border-width: 1px;*/
/*  BORDER-STYLE: ridge;*/
  BACKGROUND: #c4d9ef; 
  line-height: 1;
  background-image: url(http://images.cnblogs.com/cnblogs_com/csophys/368957/r_lightblue.gif);
}


H3 {
  margin-left: -25px;
  margin-right: 0px;
  margin-top: 40pt;   
  PADDING: 3px 0px 3px 10px;
  COLOR: #2b804c;
/*  COLOR: #6b18e7;
    color: #ff3300;*/
  font-family: "Trebuchet MS";
  FONT-WEIGHT: BOLD;
  font-size: 18px;
  BORDER-bottom: #2b804c 1px solid; 
  BORDER-LEFT: #2b804c 6px solid;
/*  BORDER-BOTTOM: #6b18e7 1px dashed;
  border-style: groove; */
  BACKGROUND: #d9eae0;
  line-height: 1;
  background-image: url(http://images.cnblogs.com/cnblogs_com/csophys/368957/r_lightgreen.gif);
}

H4 {
  margin-left: -15px;
  margin-right: 0px;
  PADDING: 3px 0px 3px 10px;
  font-family: "Trebuchet MS";
  FONT-WEIGHT: bold;
  font-size: 16px;
  /* COLOR: (#963455; fce6eb) (4d2b82, e0d5f1) */
  COLOR: #d04b44;
  BORDER-bottom: #d04b44 1px solid;
  BORDER-LEFT: #d04b44 6px solid;
  /*BACKGROUND: #f2dad8;*/
  line-height: 1;
/*  background-image: url(http://images.cnblogs.com/cnblogs_com/csophys/368957/r_nicebg2.png);*/
}

H5 {
/*   border: grey 1px dashed; */
  margin: 10px 0px 2px 0px;
  font-size: 14pt;
  color: #7b7b5a;
  line-height: 1;
}

H2:hover, H3:hover, H4:hover, H5:hover {
  BORDER-bottom-style: dashed; 
}


H2:link, H2:active, H3:link, H3:active, H4:link, H4:active, H5:link, H5:active {
    border-width: 1px;
    border-style: inset;
}

H6.mulu {
/*  color: #083729;*/
    color: #46357c;
  margin: 0px 0px -10px -35px;
  font-size: 14px;
}

IMG {
  /*BORDER: 1px solid;
  align: right;
  Float: right;*/
  margin-bottom: 5px;
}

a img {
    border: none;
    background:  none;
}

PRE {
  line-height: 1.6;
  FONT: 10.5pt Consola,"Bitstream Vera Sans", Courier New, helvetica;
  color:wheat;
// COLOR: #284d6a;
  /*BORDER: #95dcef 1px dashed;*/
  PADDING: 0.5em 0em 0.5em 1em;
  MARGIN-left: 0px;
  Margin-right: 0px;
/*  BACKGROUND: #c4e6f0;*/
  /*background-image: url(http://images.cnblogs.com/cnblogs_com/csophys/368957/r_bg_old.gif);*/
//  background-image: url(http://images.cnblogs.com/cnblogs_com/csophys/368957/r_brick.gif);
/*  BACKGROUND: #f7fcee;*/
  BACKGROUND:#2f4f4f;
}
/*
pre:hover, pre.example:hover {
    border-style: outset;
}

pre:link, pre:active, pre.example:link, pre.example:active {
    border-style: inset;
}
*/
div.mulu {
  margin-left: -35px;
  margin-bottom: 3em;
  padding-top: -2em;
  padding-bottom: -2em;
  padding-left: 35px;
  border-top: grey 1px dashed;
  border-bottom: grey 1px dashed; 
  background: transparent url("http://images.cnblogs.com/cnblogs_com/csophys/368957/r_menu_tr.gif");
}


div.me {
  FONT: 9pt Courier New, helvetica;
  color: #3c5e08;
  BORDER: #ccaa00 1px solid;
  PADDING: 0.5em 0.5em 0.5em 1em;
  MARGIN-left: 0px;
  Margin-right: 0px;
  background-image: url(http://images.cnblogs.com/cnblogs_com/csophys/368957/r_nice.gif);
}


PRE.example {
 /* COLOR: #80856e;
  color: #8b4513;*/
  color: #3c5e08;
/*  BORDER: #9f8787 1px solid;*/
/*  BORDER: #f0807f 1px dashed;*/
  BORDER: #ccaa00 1px solid;
  PADDING: 0.5em 0.5em 0.5em 1em;
  MARGIN-left: 0px;
  Margin-right: 0px;
  background-image: url(http://images.cnblogs.com/cnblogs_com/csophys/368957/r_nice.gif);
}

.verse {
  MARGIN-LEFT: 1em;
  WHITE-SPACE: pre;
}

DT {
  padding-top: 1em;
  font-size: 14px;
  FONT-WEIGHT: bold;
  color: #ee4000;
}


P {
  MARGIN-LEFT: 0px;
  margin-right: 0px;    
/*  text-align: justify;*/
}

P A {
    font-family: 'Trebuchet MS';
}

/* what to make light gray? as this #fxfxfx, x bigger, the lighter*/
/*P:hover, tr:hover, td:hover, li:hover, dt:hover, dd:hover {
    background: #f1f9f4;    
    background: #eef1f4;    
    background: #f6f8f8;    
}*/




/*
P:first-letter 
{
  font-weight:bold;
  color: black;
}
*/


ul, ol {
  margin-left: 30px;
  margin-right: 0px;
  padding: 0px;
/*  text-align: justify;*/
}

ul{
  list-style-image: url(http://images.cnblogs.com/cnblogs_com/csophys/368957/r_ul.gif);
}

ul ol{
  list-style-image: none;
}

ul ul {
  list-style-image: url(http://images.cnblogs.com/cnblogs_com/csophys/368957/r_olul.gif);
}

ol ul {
  list-style-image: url(http://images.cnblogs.com/cnblogs_com/csophys/368957/r_ulul.gif);
}

strong em {
  /*color: #ff2200;*/
  color: #000066;
}

strong {
  /* color: #8b008b;*/
  color: black;
}

em {
  /*   color: #8b2323;   */
  color: #003399;
  font-style: oblique;
}

/* under line*/
u {
  text-decoration: none;
  font-style: oblique;
  /*color: #284d6a;*/
  color: #68228b;
}

.navfoot {
    /*
    margin-left: -35px;
    margin-right: -40px; */
    width: 100%;
}

.footdate .foothome{
  FONT: 9pt Verdana,  Arial, Times New Roman, Courier New, Helvetica;
}

table {
  margin-top: 5px;
  margin-bottom: 5px;
}

td {
  BORDER-RIGHT: buttonshadow 1px solid;
  PADDING-RIGHT: 2px;
  BORDER-TOP: buttonhighlight 1px solid; 
  PADDING-LEFT: 3px; 
  OVERFLOW: hidden; 
  BORDER-LEFT: buttonhighlight 1px solid; 
  BORDER-BOTTOM: buttonshadow 1px solid; 
  HEIGHT: 23px;
  /*     border: 1px solid #CCCCCC;
     font-size: 11pt;
     font-family: Helvetica, arial, sans-serif;
     vertical-align: baseline;
     padding-left: 10px;
     padding-right: 7px; */
  background: #e0e0c0;
  font-size: 13px;
}

th {
  /* text-align: left;
     padding-top: 10px;
     padding-left: 10px;
     border: none;*/
  BORDER-RIGHT: buttonshadow 1px solid;
  PADDING-RIGHT: 2px;
  BORDER-TOP: buttonhighlight 1px solid; 
  PADDING-LEFT: 3px; 
  OVERFLOW: hidden; 
  BORDER-LEFT: buttonhighlight 1px solid; 
  BORDER-BOTTOM: buttonshadow 1px solid; 
  HEIGHT: 23px;
  background: #ffd112;
  font-size: 13px;
}

hr {
    border-style: dashed;
    border-color: #ccc;
}

.toplink { 
    font-size: x-small; 
    float: right;
    line-height:1;
}
.toplink A { 
    text-decoration: none;
    color: inherit;
    background: inherit;
}
.toplink A:hover { text-decoration: underline }
/*.toplink A:visited { color: darkgray; text-decoration: none }*/


/* menu */

.menu:before {
    line-height: 0.1;
    font-size: 1px;
    background: transparent url("http://images.cnblogs.com/cnblogs_com/csophys/368957/r_menu_tr.gif") no-repeat top right;
    margin: 0;
    height: 9px;
    display: block;
    border-bottom: 1px solid #ddd;
    content: url("http://images.cnblogs.com/cnblogs_com/csophys/368957/r_key-point_tl.gif");
}
.menu {
    background: #E0E9E9 url("http://images.cnblogs.com/cnblogs_com/csophys/368957/r_menu_back.gif") right repeat-y;
    float: right;
    clear: both;
}
.menu:after {
    display: block;
    padding-top: 0;
    line-height: 0.1;
    font-size: 1px;
    content:  url("http://images.cnblogs.com/cnblogs_com/csophys/368957/r_key-point_bl.gif");
    margin: 0 0 0 0;
    height: 8px;
    background: transparent url("http://images.cnblogs.com/cnblogs_com/csophys/368957/r_menu_br.gif") scroll no-repeat bottom right ;
    border-top: 1px solid #fff;
}

.menu, .menuitem {
    margin: 0;
    padding: 0;
    list-style: none;
}

.menuitem {
    FONT: 11px Verdana, Courier New;
    display: inline;
    padding: 0;
    margin: 0;
}

.menuitem a {
    display: block;
    padding: 1px 10px 1px 10px;
    color: #00008b;
    text-decoration: none;
    background: #EDF2F2;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #fff;
    border-right: 1px solid #ddd;
}

.menuitem a:hover {
    /*background: #E0E9E9;*/
    color: #c00;
}

/* table of contents for this page*/
.contents {
    padding-top: 2px;
    FONT: 10px Verdana, Courier New;
} 

dt.contents:before {
    display: inline;
    content: url("http://images.cnblogs.com/cnblogs_com/csophys/368957/r_dotnice.gif");
}

dt.contents a {
    font-size: 12px;
    color: #c00;
    display: inline;
}

dt.contents a:hover {
  /*background-color: #ffe7e7;*/
}


dd dl dt.contents:before {
    display: inline;
    content: url("");
}

dd dl dt.contents a {
    font-weight: normal;
    font-size: 11px;
    color: #007f1d;
    display: block;
}

dd dl dt.contents a:hover {
  background-color: #dfffe6;
}

span.comment {
  line-height: 1.6;
  font-weight: normal;
}

/* for program source*/
.comment {
  /* font-lock-comment-face */
  color: #cd0000;
  font-weight: bold;
  font-style: italic;
}

.function-name {
  /* font-lock-function-name-face */
  color: #0000ff;
  font-weight: bold;
}
.keyword {
  /* font-lock-keyword-face */
  color: #a020f0;
  font-weight: bold;
}
.preprocessor {
  /* font-lock-preprocessor-face */
  /*color: #7fffd4;*/
  color: black;
  font-weight: bold;

}
.string {
  /* font-lock-string-face */
  color: #008b00;
}
.type {
  /* font-lock-type-face */
  color: #000080;
}
.variable-name {
  /* font-lock-variable-name-face */
  color: #8b5a2b;
}

.doc {
  /* font-lock-comment-face */
  color: #F0A4A4;
}

csophys's blog

提升软实力！

org-mode 写cnblogs 博文(一些问题的解决)

org-mode 写cnblogs 博文(一些问题的解决)

公告