2018年6月2日 星期六

Blog中，程式高亮度設定

要讓部落格可以出現高亮度顯示以及像寫程式般的介面
只要把以下的程式碼貼到<head>之後，<body>之前
只要有用到<pre>xxxxxx</pre>
就可顯示 
/*程式碼高亮設定*/ 
/*css部份*/


/*main box*/ 
.red{ 
 border: 1px solid #ff0000; 
 padding: 3px 3px 3px 0; 
} 
pre.prettyprint, code.prettyprint { 
 border-radius: 8px; 
 -moz-border-radius: 8px; 
 -webkit-border-radius: 8px; 
 padding: 5px; 
 background-color: #eee !important; 
 box-shadow: 0 0 5px #999; 
 -moz-box-shadow: 0 0 5px #999; 
 -webkit-box-shadow: 0 0 5px #999; 
} 
/*font*/ 
pre span, code span { 
 font-family: 'monospace', 'Courier New', 'Microsoft JhengHei', sans-serif !important; 
 font-size: 12px !important; 
} 
/*each line*/ 
li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9 { 
 margin: 0 !important; 
 padding: 2px 0 2px 4px !important; 
 list-style-type:decimal !important; 
 border-left: 1px solid #999; 
} 
/*even line*/ 
li.L1, li.L3, li.L5, li.L7, li.L9 { 
 background-color: #f6f6f6 !important; 
} 
/*odd line*/ 
li.L0, li.L2, li.L4, li.L6, li.L8 { 
 background-color: #FFF !important; 
} 
/*line-number background color*/ 
ol.linenums { 
 background-color: #eee; 
 margin-left: 10px; 
} 


/*程式高亮度設定script部份*/
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?autoload=true&amp;lang=basic&amp;lang=css&amp;lang=sql"> 
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js'/> 
<script type='text/javascript'> 
    $(&quot;pre&quot;).each(function(){ 
        $(this).addClass(&#39;prettyprint&#39;).addClass(&#39;linenums&#39;); 
    }); 
</script>
張貼者： 於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)