借用Snippet插件美化博客中的代碼

時間 2019-11-13

標籤借用 snippet 插件美化博客代碼简体版

原文原文鏈接

書寫博客，不免要貼出代碼。然而直接貼出代碼，則不美觀。因而，應運而生出現了不少代碼美化的插件。其中比較有名的是Syntax Highlighting插件。javascript

筆者在網上翻閱的時候發現了Snippet插件，其支持衆多的代碼類的美化——例如：HTML、CSS、JS、C#等。並有39種不一樣的美化風格可供選擇。css

其官網地址：Snippet插件官網。在官網上，已經比較詳細的介紹了插件的使用方法，這裏就不在贅述了。html

和許多美化插件同樣，該插件是基於JQuery的，故在使用的時候，要先引用相關的文件，以下所示：java

   
   
   
   
    
    
    
    <link rel="stylesheet" type="text/css" href="css/jquery.snippet.css" />
    
    
    
    <script type="text/javascript" src="js/jquery.js"></script>
    
    
    
    <script type="text/javascript" src="js/jquery.snippet.js"></script>

注意：因爲在jquery.snippet.js中使用了代碼$.browser.opera，而這個代碼在JQuery 1.9版本中已經移除，故若是引用的是JQuery 1.9版本，則插件使用會不正常。所以，建議直接引用其官網上的JQuery 1.4版本。jquery

那如何在本身的博客中使用Snippet插件呢？web

首先，把須要用到的文件先上傳到博客的後臺瀏覽器

其次，在博客的頁面中寫引用插件的代碼。dom

或者是統一在博客後臺中的頁面設置中統一引用，但這有一個反作用，就是每篇博客都會引用這幾個文件（無論有用沒用，都會引用，這些文件加起來也有近240K，對沒用到這個插件的頁面來講是個浪費，例如筆者以前的近百篇文章）ide

咱們來看看Snippet插件是如何美化代碼的ui

一、頁面加載Snippet插件所需的文件（三個文件，大約240K）

二、調用插件的Snippet方法，美化PRE標籤下的代碼

三、對代碼從新用HTML代碼格式化（添加HTML標籤，如li和span等），經過HTML代碼調用相應的類來呈現美化好後的代碼

但調用Snippet插件美化代碼也有些反作用

一、須要調用外部文件，代碼臃腫（三個文件240K）

二、咱們看中的是美化後的結果，不在意美化的過程。而調用插件，則每次瀏覽的時候都會執行美化的過程。

三、美化還不智能，只能針對一種類別進行美化，好比僅僅對HTML或者是JS美化。若是是包含JS代碼的HTML頁面，則美化的效果大打折扣。

那咱們能夠把美化好後的HTML代碼段複製到咱們的博客中，再引用相應的CSS文件，那既能夠實現美化代碼的做用，又避免引用Snippet插件的文件，還能夠本身定製微調，實現完美美化包含JS代碼的HTML頁面。

因而，本身單獨編寫一個用Snippet插件來美化代碼的頁面。頁面效果以下：

界面比較簡陋，上部是一個文本框，中間是兩個選項和一個按鈕，下部分爲兩部分，一個是美化後的效果，一個是該效果對應的HTML代碼。具體的該頁面的HTML代碼以下所示：（這個頁面在IE下運行正常，但在Chrome下不能正常運行，是由於innerText麼？）

   
   
   
   
    
    
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    
    
    <head>
    
    
    
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    
    
        <title>Snippet</title>
    
    
    
        <link href="CSS/jquery.snippet.css" rel="stylesheet" type="text/css" />
    
    
    
        <script type="text/javascript" src="JS/jquery.min.js"></script>
    
    
    
        <script type="text/javascript" src="JS/jquery.snippet.js"></script>
    
    
    
    </head>
    
    
    
    <body>
    
    
    
        <p>
    
    
    
            <textarea cols="100" rows="20" name="Code"></textarea>
    
    
    
        </p>
    
    
    
        <p>
    
    
    
            <input type="button" name="button" id="button" value="美化代碼" onclick="F();" />
    
    
    
            ，類別：
    
    
    
            <select name="select" id="select">
    
    
    
                <option value="html">HTML</option>
    
    
    
                <option value="css">CSS</option>
    
    
    
                <option value="JavaScript">JavaScript</option>
    
    
    
            </select>
    
    
    
            ，樣式：
    
    
    
            <select name="select2" id="select2">
    
    
    
                <option value="bright">bright</option>
    
    
    
                <option value="golden">golden</option>
    
    
    
                <option value="navy">navy</option>
    
    
    
                <option value="whatis">whatis</option>
    
    
    
                <option value="random" selected="selected">random</option>
    
    
    
            </select>
    
    
    
        </p>
    
    
    
        <div id="C" style="width: 600px; word-wrap: break-word;">
    
    
    
            <pre id="FormatCode"></pre>
    
    
    
        </div>
    
    
    
        <div id="D" style="background-color: #EEF7A6">
    
    
    
        </div>
    
    
    
    </body>
    
    
    
    <script>
    
    
    
        function F() {
    
    
    
     
    
    
    
            var S = Code.value;
    
    
    
     
    
    
    
            document.getElementById("C").innerHTML = '<pre id="FormatCode"></pre>';
    
    
    
            document.getElementById("FormatCode").innerText = S;
    
    
    
     
    
    
    
            var V1, V2;
    
    
    
            V1 = select.value;
    
    
    
            V2 = select2.value;
    
    
    
            $("pre#FormatCode").snippet(V1, { style: V2, transparent: false, showNum: false });
    
    
    
     
    
    
    
            document.getElementById("D").innerText = document.getElementById("C").innerHTML;
    
    
    
     
    
    
    
        }
    
    
    
    </script>
    
    
    
    </html>

注：Snippet插件一共有39種樣式，這裏是演示代碼，只貼了4種選項，實際能夠根據本身的喜愛貼選項。在實際的頁面中，我貼了15種選項。

我再把所須要的樣式表直接添加在源代碼裏，由於本文所用的樣式是Golden樣式，故本文只貼了Snippet插件的基本樣式和Golden樣式。

   
   
   
   
    
    
    
    <style>
    
    
    
    .sh_golden{background:none; padding:0; margin:0; border:0 none;}
    
    
    
    .sh_golden .sh_sourcecode{background-color:#000;color:#db0;font-weight:normal;font-style:normal;}
    
    
    
    .sh_golden .sh_sourcecode .sh_keyword{color:#ffed8a;font-weight:bold;font-style:normal;}
    
    
    
    .sh_golden .sh_sourcecode .sh_type{color:#ffed8a;font-weight:normal;font-style:normal;}
    
    
    
    .sh_golden .sh_sourcecode .sh_string{color:#f00;font-weight:normal;font-style:normal;}
    
    
    
    .sh_golden .sh_sourcecode .sh_regexp{color:#f00;font-weight:normal;font-style:normal;}
    
    
    
    .sh_golden .sh_sourcecode .sh_specialchar{color:#f00;font-weight:normal;font-style:normal;}
    
    
    
    .sh_golden .sh_sourcecode .sh_comment{color:#978345;font-weight:normal;font-style:italic;}
    
    
    
    .sh_golden .sh_sourcecode .sh_number{color:#fff;font-weight:normal;font-style:normal;}
    
    
    
    .sh_golden .sh_sourcecode .sh_preproc{color:#fda;font-weight:normal;font-style:normal;}
    
    
    
    .sh_golden .sh_sourcecode .sh_symbol{color:#ababab;font-weight:normal;font-style:normal;}
    
    
    
    .sh_golden .sh_sourcecode .sh_function{color:#db0;font-weight:bold;font-style:normal;}
    
    
    
    .sh_golden .sh_sourcecode .sh_cbracket{color:#ababab;font-weight:normal;font-style:normal;}
    
    
    
    .sh_golden .sh_sourcecode .sh_url{color:#f00;font-weight:normal;font-style:normal;}
    
    
    
    .sh_golden .sh_sourcecode .sh_date{color:#ffed8a;font-weight:bold;font-style:normal;}
    
    
    
    .sh_golden .sh_sourcecode .sh_time{color:#ffed8a;font-weight:bold;font-style:normal;}
    
    
    
    .sh_golden .sh_sourcecode .sh_file{color:#ffed8a;font-weight:bold;font-style:normal;}
    
    
    
    .sh_golden .sh_sourcecode .sh_ip{color:#f00;font-weight:normal;font-style:normal;}
    
    
    
    .sh_golden .sh_sourcecode .sh_name{color:#f00;font-weight:normal;font-style:normal;}
    
    
    
    .sh_golden .sh_sourcecode .sh_variable{color:#dedede;font-weight:bold;font-style:normal;}
    
    
    
    .sh_golden .sh_sourcecode .sh_oldfile{color:#f00;font-weight:normal;font-style:normal;}
    
    
    
    .sh_golden .sh_sourcecode .sh_newfile{color:#f00;font-weight:normal;font-style:normal;}
    
    
    
    .sh_golden .sh_sourcecode .sh_difflines{color:#ffed8a;font-weight:bold;font-style:normal;}
    
    
    
    .sh_golden .sh_sourcecode .sh_selector{color:#dedede;font-weight:bold;font-style:normal;}
    
    
    
    .sh_golden .sh_sourcecode .sh_property{color:#ffed8a;font-weight:bold;font-style:normal;}
    
    
    
    .sh_golden .sh_sourcecode .sh_value{color:#f00;font-weight:normal;font-style:normal;}
    
    
    
     
    
    
    
    .snippet-wrap {position:relative;}
    
    
    
    *:first-child+html .snippet-wrap {display:inline-block;}
    
    
    
    * html .snippet-wrap {display:inline-block;}
    
    
    
    .snippet-reveal{text-decoration:underline;}
    
    
    
    *:first-child+html .snippet-wrap .snippet-hide {bottom:25px;}
    
    
    
    * html .snippet-wrap .snippet-hide {bottom:25px;}
    
    
    
    .snippet-wrap pre.sh_sourcecode{padding:1em;line-height:1.8em;overflow:auto;position:relative;
    
    
    
    -moz-border-radius:15px;
    
    
    
    -webkit-border-radius:15px;
    
    
    
    border-radius:15px;
    
    
    
    box-shadow: 2px 2px 5px #000;
    
    
    
    -moz-box-shadow: 2px 2px 5px #000;
    
    
    
    -webkit-box-shadow: 2px 2px 5px #000;}
    
    
    
    .snippet-wrap pre.snippet-textonly {padding:2em;}
    
    
    
    *:first-child+html .snippet-wrap pre.snippet-formatted {padding:2em 1em;}
    
    
    
    * html .snippet-wrap pre.snippet-formatted {padding:2em 1em;}
    
    
    
    .snippet-reveal pre.sh_sourcecode {padding:.5em 1em; text-align:right;}
    
    
    
    .snippet-wrap .snippet-num li{padding-left:1.5em;}
    
    
    
    .snippet-wrap .snippet-no-num{list-style:none!important; padding:.6em 1em; margin:0!important;}
    
    
    
    .snippet-wrap .snippet-no-num li {list-style:none ; padding-left:0;margin:0px;}
    
    
    
    .snippet-wrap .snippet-num {margin:1em 0 1em 1em; padding-left:3em;}
    
    
    
    .snippet-wrap .snippet-num li {list-style:decimal-leading-zero outside none;}
    
    
    
    .snippet-wrap .snippet-no-num li.box {padding:0 6px; margin-left:-6px;}
    
    
    
    .snippet-wrap .snippet-num li.box {border:1px solid; list-style-position:inside; margin-left:-3em; padding-left:6px;}
    
    
    
    *:first-child+html .snippet-wrap .snippet-num li.box {margin-left:-2.4em;}
    
    
    
    * html .snippet-wrap .snippet-num li.box {margin-left:-2.4em;}
    
    
    
    .snippet-wrap li.box-top {border-width:1px 1px 0 !important;}
    
    
    
    .snippet-wrap li.box-bot {border-width:0 1px 1px !important;}
    
    
    
    .snippet-wrap li.box-mid {border-width:0 1px !important;}
    
    
    
    .snippet-wrap .snippet-num li .box-sp {width:18px; display:inline-block;}
    
    
    
    *:first-child+html .snippet-wrap .snippet-num li .box-sp {width:27px;}
    
    
    
    * html .snippet-wrap .snippet-num li .box-sp {width:27px;}
    
    
    
    .snippet-wrap .snippet-no-num li.box {border:1px solid;}
    
    
    
    .snippet-wrap .snippet-no-num li .box-sp {display:none;}
    
    
    
     
    
    
    
    .snippet-container{width:80%;word-wrap:break-word;}
    
    
    
    </style>

上面的CSS代碼中的綠色部分是我額外添加的，由於博客園中設置了一些CSS，破壞了Snippet插件美化後的效果，如增長了li元素的行間距，還有ul的左邊距，以及增長了li元素的list-style屬性（用了!important提升了優先級，我也只能用!important提高優先級，強制去掉li元素以前的列表樣式）

實際使用下來，Snippet插件美化代碼的效果仍是不錯的，但也有要完善的地方，例如在美化CSS中，碰到+-等符號美化就會出錯，還得本身修正。

題外話：在貼樣式的時候，不知是博客園的設置問題仍是Windows Live Writer的問題，樣式中的大寫字母會被替換成小寫字母，致使樣式無效（瀏覽器認爲是不一樣的樣式，無法運用）。故在貼美化後的HTML代碼時，把引用的CSS中的類大寫改爲小寫。

本文是利用Snippet插件來美化咱們的代碼。若是，還有更好的建議，望不吝賜教。