20141015 今日學習

讀了一篇好文章

• 最美的愛，是讓你從自己身上發現愛 | 女人迷 womany 

讀了另一篇創業的文章，男性時尚穿搭

• 還在為經營網站苦手？Famousoutfits 教你用 30 天突破 30 萬瀏覽量！ | TechOrange

接續昨天的工作，讓blogger裡的程式碼漂亮些，找到一篇不錯的整理文章

• 在網頁中嵌入顯示程式碼：全系列效果比較及教學整理 @ 符碼記憶
• 稍微瀏覽一下後，我覺得我比較喜歡Pastie的作法

各種鑲嵌程式碼的測試

1. Pastie

(程式碼放置處)

• 缺點，在blogger的編輯模式、預覽模式都看不到code，這點我不太喜歡
• 要複製code時會把第幾行也複製進去

2. CSS Block

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

• GitHub Gist 在部落格、網頁中內嵌入高亮程式碼 – 香腸炒魷魚

• 經測試後，它可以在預覽模式看到code，恩....有比較好一點
• 不過一樣在編輯模式看不到code，很容易不小心就刪掉它 =..=

剛剛想到一個方法，如下面所示，要弄code時就用分隔線隔開，把code放在裡面

示意：

-----

code block

-----

用Gist實際操作：

-----

-----

• 如此一來就不用擔心刪到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的部分我是用這教學

• 研發筆記: 使用 Google Code Prettify 顯示程式碼

但是老實說我不喜歡它顯示的codeblock，所以我改用原本的CSS block裡的格式

• [教學] 如何在 Blogger 文章裡顯示程式碼？ @ ChaoFree免費軟體下載中心

明日工作：

先寫一則網誌來紀錄今天學到的吧，難得的教學文 XD