[blogger] code block

code block

目前作法

在主題->自訂->blogger設計工具->進階->新增CSS內加入

CODE {
    display: block; /* fixes a strange ie margin bug */
    font-family: Courier New;
    font-size: 8pt;
    overflow:auto;
    background: #303030 url(http://klcintw.images.googlepages.com/Code_BG.gif) left top repeat-y;
    border: 1px solid #ccc;
    padding: 10px 10px 10px 21px;
    max-height:1200px;
    line-height: 1.2em;
}

顏色大小可以自己調整，下方預覽即時視窗
發表文章時，先貼到撰寫，再去HTML前後加入





(不然不會code內自己換行)

調整內文行距

覺得字太擠了，直接在blogger設計工具->進階->新增CSS內加入

.post-body {
font-size:17px;  
line-height: 1.9em; 
letter-spacing: 0px;  
}

看著預覽變化慢慢調整數值

reference

stackoverflow討論
http://alexgorbatchev.com/SyntaxHighlighter/

https://github.com/syntaxhighlighter/syntaxhighlighter
http://chiumog.blogspot.tw/2015/02/blog-code-block.html

這個文章講得蠻清楚的
https://ryojaw.blogspot.tw/2016/07/blogger-google-code-prettify.html
https://stackoverflow.com/questions/35679063/making-code-block-in-css-look-good
http://www.wfublog.com/2016/05/code-highlighter-optimization.html

覺得好看

http://blog.technicallyworks.com/

library

https://cdnjs.com/libraries