在 Blogger 文章中使用 Google Code Prettify 顯示範例程式碼
作為一個以程式技術為主的分享網誌，當然會貼上幾段程式碼，後來發現當分享大型架構作品時，會貼上許許多多的程式碼範例與構造，想也知道貼到最後會亂七八糟，搞到最後連自己也會看不懂，這時在網路上找到 Google Code Prettify 這個方法，也讓我日後不用為此煩惱，趕緊介紹如何使用吧!
介紹如何使用 Google Code Prettify ：
3.接著繼續 "Ctrl+F" 出現搜尋視窗，在搜尋視窗輸入"<body" 在<body的上方覆蓋貼上
修改 CSS 樣式表 美化程式碼 ：
1.繼續 "Ctrl+F" 出現搜尋視窗，在搜尋視窗輸入/* Posts" 在/* Posts的下方貼上
2.設定完之後記得要"儲存範本"
使用 CSS 樣式表 與 Google Code Prettify ：
請在HTML編輯畫面輸入下面程式碼即可執行
參考資料：夏箖筆記
介紹如何使用 Google Code Prettify ：
1.首先在 "我的網誌" 底下點選 "範本" 再點選旁邊的 "編輯HTML"
2.開啟之後 "Ctrl+F" 出現搜尋視窗，在搜尋視窗輸入"</head>" 在</head>的上方貼上
<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" rel="stylesheet" type="text/css"></link> <script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js" type="text/javascript"> </script>
3.接著繼續 "Ctrl+F" 出現搜尋視窗，在搜尋視窗輸入"<body" 在<body的上方覆蓋貼上
<body expr:class='"loading" + data:blog.mobileClass' onload='prettyPrint();'>
修改 CSS 樣式表 美化程式碼 ：
1.繼續 "Ctrl+F" 出現搜尋視窗，在搜尋視窗輸入/* Posts" 在/* Posts的下方貼上
.post .code {
display: block;
font-family: Courier New;
font-size: 10pt;
overflow:auto;
background: #f0f0f0 url(http://yourweb_images_home/Code_BG.gif) left top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height:200px;
line-height: 1.2em;
}
2.設定完之後記得要"儲存範本"
使用 CSS 樣式表 與 Google Code Prettify ：
請在HTML編輯畫面輸入下面程式碼即可執行
<pre class="code prettyprint"> 要顯示的程式碼 </pre>
參考資料：夏箖筆記
留言
張貼留言