使用 Snippet 在 部落格 張貼 程式碼 工具

How to post code in your bloger using snippet

166
有時候寫技術文章的時候需要張貼程式碼,這邊提供一個不錯用的工具 snippet
以下介紹使用方法:


  • 將 jquery.js 和 jquery.snippet.js 加入程式
    jquery-latest.js下載   jquery.snippet.js下載 (按右鍵另存連結)
    <script type="text/javascript" src="js/jquery.js"></script>
    
    
    <script type="text/javascript" src="js/jquery.snippet.js"></script>




  • 將 jquery.snippet.css 加入程式
    jquery.snippet.css下載 (按右鍵另存連結)
    <link rel="stylesheet" type="text/css" href="css/jquery.snippet.css" />




  • 將你想要的樣式效果加入程式
    $(document).ready(function(){
    
    
    $("pre.htmlCode").snippet("html");
    // 使用HTML語法及預設的樣式。
    $("pre.styles").snippet("css",{style:"greenlcd"});
    // 使用CSS語法及greenlcd樣式。
    $("pre.js").snippet("javascript",{style:"random",transparent:true,showNum:false});
    // 使用JavaScript語法、random隨機樣式及不要顯示行數。
    });


  • 常用細項參數說明:
    clipboard:是否使用剪貼簿。
    showNum:程式碼是否顯示行數。
    collapse:程式碼是否要摺疊。
    style:選擇你想要的樣式。



  • 小提醒:
    你使用wordpress架設可能會遇到兩個小問題:
    1.WordPress 使用 jQuery 遇到 $字號 不認識的問題
    2.WorePress 已經幫你 "include jQuery.js" 了,若重複載入會出問題。



  • 參考連結:Snippet官方網站

喜歡我們的文章嗎
給一個讚吧~^^
本站聲明
目前偵測到您現在處於未登入的狀況中 若在此狀態進行收藏很有可能導致資料遺失或錯誤 建議先行登入後重新執行步驟,不僅能保障收藏資料也能獲得最新的資訊唷! kikinote小精靈關心您!
不再顯示此視窗