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

How to post code in your bloger using snippet

作者: 七味粉 |
文章2013-04-19
97 分享
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官方網站

貼心小提醒
1.您目前未登入,若於此狀態進行文章收藏,紀錄可能無法長期保留。
2.建議登入後進行收藏,好文會幫你保存著,隨時要看也不怕找不到唷~

KiKiNote持續為您提供最優質的資訊內容,謝謝您!
不再顯示此視窗

複製成功