讀了另一篇創業的文章,男性時尚穿搭
接續昨天的工作,讓blogger裡的程式碼漂亮些,找到一篇不錯的整理文章
- 在網頁中嵌入顯示程式碼:全系列效果比較及教學整理 @ 符碼記憶
- 稍微瀏覽一下後,我覺得我比較喜歡Pastie的作法
各種鑲嵌程式碼的測試
1. Pastie
(程式碼放置處)
- 缺點,在blogger的編輯模式、預覽模式都看不到code,這點我不太喜歡
- 要複製code時會把第幾行也複製進去
var bodyAnims = new THREEx.MinecraftCharBodyAnimations(character);
updateFcts.push(function(delta, now){
bodyAnims.update(delta, now)
})
var switchBodyValue = function(value){
bodyAnims.start(value)
}
- 可以在編輯時看到我的code,但是code的排版會跑掉很難搞很麻煩 =..=
試了上面兩個後,估狗發現另一個在blogger弄程式碼的東西Gist
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var bodyAnims = new THREEx.MinecraftCharBodyAnimations(character); | |
updateFcts.push(function(delta, now){ | |
bodyAnims.update(delta, now) | |
}) | |
var switchBodyValue = function(value){ | |
bodyAnims.start(value) | |
} |
- 經測試後,它可以在預覽模式看到code,恩....有比較好一點
- 不過一樣在編輯模式看不到code,很容易不小心就刪掉它 =..=
示意:
-----
code block
-----
用Gist實際操作:
-----
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var bodyAnims = new THREEx.MinecraftCharBodyAnimations(character); | |
updateFcts.push(function(delta, now){ | |
bodyAnims.update(delta, now) | |
}) | |
var switchBodyValue = function(value){ | |
bodyAnims.start(value) | |
} |
-----
- 如此一來就不用擔心刪到code
3. Highlight
- 把軟體安裝完後,進入發現一次要弄一整個檔案,我就不想用這軟體了...
4. google-code-prettify
測試:
- 研發筆記: 使用 Google Code Prettify 顯示程式碼 (我用此教學)
- 在 Blogger 文章中利用 CSS Block 及 Google Code Prettify 顯示程式碼
- 程式設計雜筆: 用 google-code-prettify 在網頁中嵌入代碼
格式:
<pre class="codeblock prettyprint">
程式碼
</pre>
var bodyAnims = new THREEx.MinecraftCharBodyAnimations(character); updateFcts.push(function(delta, now){ bodyAnims.update(delta, now) }) var switchBodyValue = function(value){ bodyAnims.start(value) }
- 就決定用這個了,排版也不會跑掉,輕鬆方便快速多了 ^_^
var bodyAnims = new THREEx.MinecraftCharBodyAnimations(character); updateFcts.push(function(delta, now){ bodyAnims.update(delta, now) }) var switchBodyValue = function(value){ //安安你好,我是註解 bodyAnims.start(value) }
- 結果是可行的,感到非常愉悅
最後總結一下:
在google-code-prettify的部分我是用這教學
但是老實說我不喜歡它顯示的codeblock,所以我改用原本的CSS block裡的格式
明日工作:
先寫一則網誌來紀錄今天學到的吧,難得的教學文 XD
沒有留言:
張貼留言