各位日安！今天不打code，來聊聊如何在網誌嵌入程式碼吧(・∀・)
之所以會打這篇，其實就表示這是我的煩惱QQ
其實就我的觀察，在這個部落格群雄割劇的年代，痞客邦並不是技術部落客的首選
會拿痞客邦來寫技術的人，這幾年也幾乎找不到了(╯=▃=)╯︵┻━┻
取而代之的是大部分的人都改用Medium、CSDN(大陸)、IT鐵人幫等平台來撰寫
後兩者因為本身就是給軟體工程師寫程式用的，因此設計上本身就對嵌入程式下了不少功夫
而Medium作為國際間最夯的部落格經營，因此各種程式碼相關嵌入資源也相對豐富
但是痞客邦雖然是臺灣元老級(2003年上線)的部落格品牌，但是也僅在台灣地區較為有市場，想經營海外用戶可能會比較困難(´･_･｀)
也因此看在這點上，本農決定奉獻自己的一點知識，來分享如何在痞客邦(當然其他網誌大概也通用)文章中插入程式碼的幾個方法
希望能夠幫助到大家！
那麼就開始吧～(・ωｰ)～☆
1. blogspot
首先是Blogspot,網站在此
->http://formatmysourcecode.blogspot.com
這是我最早使用的作法，效果會像這樣
private static String byteArrayToHexStr(byte[] byteArray) {
if (byteArray == null) {
return null;
}
StringBuilder hex = new StringBuilder(byteArray.length * 2);
for (byte aData : byteArray) {
hex.append(String.format("%02X", aData));
}
String gethex = hex.toString();
return gethex;
}
使用方法:
1. 首先開啟網站
2. 把程式貼到上方空白，並點擊藍色箭頭指向的按鈕
3. 將反藍的部分全部複製起來
4. 回到痞客邦編輯器中，點選原始碼
5.將剛才複製到的Code隨意置入
6. 完成！
private static String byteArrayToHexStr(byte[] byteArray) {
if (byteArray == null) {
return null;
}
StringBuilder hex = new StringBuilder(byteArray.length * 2);
for (byte aData : byteArray) {
hex.append(String.format("%02X", aData));
}
String gethex = hex.toString();
return gethex;
}
優點:
1. 很簡單，幾乎不用什麼技術
2. 部落格版面若是窄版面，程式碼區域會自動加入橫向捲軸
3. 可在嵌入後網誌編輯器中再補上顏色或註解，像這樣
4. 通用所有程式碼
private static String byteArrayToHexStr(byte[] byteArray) {
if (byteArray == null) {
return null;
}
StringBuilder hex = new StringBuilder(byteArray.length * 2);
for (byte aData : byteArray) {
hex.append(String.format("%02X", aData));
}
String gethex = hex.toString();
return gethex;//這是後續標注的註解
}
缺點:
沒有HighLight，顏色單調(還蠻致命的...( ´_ゝ`))
2. Github
Github嵌套算是很多部落格都會用的方法
主要是透過Github的程式撰寫功能完成的
效果如下(如果沒看到大概就是被你的Adblock擋掉了)
使用方法:
1. 開啟你的Github主頁，找到右上角的“+”號，並點選New gist
2. 照下圖鍵入你的描述、檔名及程式Code；完成後點選Create public gist(藍)
3. 來到這個畫面後，複製紅框內的連結
4. 回到痞客邦編輯器，點選原始碼
5. 將連結複製到想要放的位置即可(備註：完成後編輯器中不會出現，但是可以按預覽看到GitHub嵌入的Code)
6. 按下預覽，就可以看到效果囉
優點:
1. 好看、整齊、適應各種版面
2.有HighLight
3. 會根據不同的程式語言有不一樣的HighLight，並適應所有程式語言
缺點:
1. 不能做二次編輯(不能補註解、特殊顏色等)
2. 編輯器預覽中不會有任何畫面，不容易調整整體版面
3. 會被Adblock(擋網頁廣告的插件)擋掉
4. 有點麻煩...._(:3」∠)_
3. 直接複製
超北爛的方法XDDDDDDD
早期沒有各種插件的時候，很多人的部落格都是直接插入程式
但是可想而知...
醜
佔版面太大
超難閱讀
但是我要講的不是這麼白痴的方法
告訴各位一個好消息，如果你的編輯器是Intelij，或是Android studio (目前只確定這兩個可以)
版面又是黑暗模式的話，可以考慮用這個方法
而呈現結果會像這樣
private static String byteArrayToHexStr(byte[] byteArray) { if (byteArray == null) { return null; } StringBuilder hex = new StringBuilder(byteArray.length * 2); for (byte aData : byteArray) { hex.append(String.format("%02X", aData)); } String gethex = hex.toString(); return gethex; }
...有沒有突然覺得很神(゜ロ゜)
不但有字體大小，還有HighLight，簡直太神了
而且還能做後製喔
像這樣
private static String byteArrayToHexStr(byte[] byteArray) { if (byteArray == null) { return null; } StringBuilder hex = new StringBuilder(byteArray.length * 2); for (byte aData : byteArray) { hex.append(String.format("%02X", aData)); } String gethex = hex.toString(); return gethex; }
很厲害吧XDDD
這種方法的優缺點:
優點:
1. 有HighLight
2. 超簡單
3. 可作後續編輯
缺點:
1. 程式碼太長也仍是佔版面(但有HighLight就好像還好)
2. 適應版面的能力不好，只有像我網誌這種寬版面較為適合
3. 目前已知只有從Intelij，Android studio複製過來的Code可以使用
4. Playground嵌入
今天介紹的方法裡面，這個是最屌的(・∀・)(・∀・)(・∀・)
看看效果吧
Java:
kotlin:
有沒有覺得這個超神（´υ｀）（´υ｀）
除了我展示Code給你看之外，你還能自己輸入執行XD
超猛的有沒有～
那就來教你怎麼用吧！
這種做法是根據該網頁提供的分享功能實現的
Java版跟Kotlin版的實現方法不一樣
至於問我其他的語言有沒有...我只能說要找找看...
因為我自己是寫Java跟Kotlin的，因此今天示範這兩個
首先是Java的
1. 請先打開這個網站
->https://www.studytonight.com/code/playground/java/
2. 寫上想要示範的Code(並執行檢查看看)
3. 按下Share，並點選Embed
4. 將他給的程式複製起來
5. 回到痞客邦編輯器中，點選原始碼
6. 將剛才的連結貼上去
7. 完成！
接下來是kotlin版
1. 首先先進到這個網頁
2. 寫下你的Code，並執行看看
3. 點選旁邊的share按鈕
4. 複製連結
5. 回到痞客邦編輯器中，點選原始碼
6. 將複製的連結貼到原始碼中(寬度的部分 width="100%"需另行加入)
7. 完成
優點:
1. 有HighLight
2. 可線上執行
缺點:
1. 撰文者沒辦法在編輯器內作後續編輯
2. 不是每種語言都有，需要自己去找出來
3. 字體大小受原本的Playground影響，不一定符合版型
結語
今天會想說寫這篇文章是因為今天是補班日(囧)
要寫一般的Android專案要花的時間太長，恐怕寫完又要去上班了(笑)
而且也算是趁機會分享一點別的東西，不要老是打扣，多無聊啊
今天講述的4種方法，都是我曾用過的做法（最後一種還沒用...）
我寫網誌的理念就是東西要深入淺出，把不會的人教到會
所以我相信，好的Code 環境會造就一篇文章的品質好壞；也因此花了不少的時間改進每篇文章的排版跟呈現Code的方式
包含如何寫呈現Code的平台，更花了我不少的時間去研究
希望如果你覺得我文章打得不錯，幫我按個推推吧～覺得寫得真的很好，就多按幾次XDDDDDD
留言列表
Python攻略大小事 (1)
