Re: [Blogger] 文章插入程式碼

看板Blog (部落格)作者descent (「雄辯是銀，沉默是金」)時間8年前 (2016/10/02 20:50)推噓0(0推 0噓 0→)

留言0則, 0人參與討論串2/2 (看更多)

我用了 code2html 這個工具, 提供你做參考。在 blog 貼上程式碼 (source code ex: c/c++/組合語言), 需要先將程式碼轉成 html 語法, 沒想到花費的力氣比我想像中的大, google 好幾天, 不是太複雜 (要修改一堆 css/js ) 就是不合我用。我只需要行號和語法顏色。當然, 最好能在 linux 下使用。 code2html vi 的 :TOhtml http://www.opinionatedgeek.com/DotNet/Tools/HTMLEncode/Encode.aspx ( https://goo.gl/klBr3 ) http://blog.xuite.net/givemepassxd/blog/40467229 ( https://goo.gl/6nsqxc ) http://fly2sky999.blogspot.tw/2012/03/blogger-css-block-google-code-prettify.html ( https://goo.gl/7kHhls ) 最後選了 code2html (用 apt-get install code2html 輕鬆搞定) code2html -H -n -l as 5M_mem_rw.S > 5M_mem_rw.html code2html -H -n -l c k.c > k.html 用這些 option 出來的結果前後加上 <pre> </pre> 即可貼到網頁/blog 上。以下是我用的 pre 有邊框的效果。 <pre style="border: 1px inset ; margin: 0px; padding: 6px; overflow: auto; width: 600px; text-align: left;"> </pre> 支援的語言: descent@ubuntu:1.5$ code2html --mode Defined modes: ada, ada95, awk, c, c++, cc, cpp, cxx, gpasm, groff, html, java, javascript, js, lisp, m4, make, makefile, pas, pascal, patch, perl, plain, pov, povray, python, ruby, sh, shellscript, sql. Defined outputformats: html, html-dark, html-fntlck, html-light, html-nobg, html-nocolor, html-simple. 方便的 script h.sh 1 ( https://goo.gl/3d1tcH ) #!/bin/sh 2 ( https://goo.gl/3d1tcH ) 3 ( https://goo.gl/3d1tcH ) echo "<fieldset><legend>$1</legend>" > $1.html 4 ( https://goo.gl/3d1tcH ) code2html -H -n -l $2 $1 >> $1.html 5 ( https://goo.gl/3d1tcH ) echo "</fieldset>" >> $1.html 組合語言 ./h.sh 5M_mem_rw_mix_c.S gpasm c 語言 ./h.sh k.c c 清除 number link: blogger 會填上 link 的內容, 所以把 a tag 換成 b tag, 使用 sed_cmd 來處理即可。 link 1 ( https://goo.gl/3d1tcH ) <a href="" name="line9"> 9</a> xor %eax, %eax 2 ( https://goo.gl/3d1tcH ) <b> 9</b> xor %eax, %eax sed_cmd 1 ( https://goo.gl/3d1tcH ) sed -i -e 's/<\/a>/<\/b>/g' simple_proc.S.html 2 ( https://goo.gl/3d1tcH ) sed -i -e 's/<a name="line[0-9]*">/<b>/g' simple_proc.S.html 加上 sed 的版本 h.sh 1 #!/bin/sh 2 # use code2html to generate html for blog. 3 # language: 4 # ada, ada95, awk, c, c++, cc, cpp, cxx, gpasm, groff, html, java, 5 # javascript, js, lisp, m4, make, makefile, pas, pascal, patch, perl, plain, pov, 6 # povray, python, ruby, sh, shellscript, sql. 7 8 if [ "$1" == "" ]; then 9 echo "usage: $0 code_filename language" 10 echo "code2html support language syntax" 11 code2html --mode 12 exit 0 13 #else 14 # echo 'usage: code_filename $1' 15 fi 16 L=plain 17 18 if [ "$2" == "" ]; then 19 echo "language syntax: $L" 20 else 21 L=$2 22 fi 23 24 25 echo "<fieldset><legend>$1</legend>" > $1.html 26 echo '<pre style="white-space: pre-wrap;">' >> $1.html 27 code2html -H -n -l $L $1 >> $1.html 28 #code2html -H -N -l $L $1 >> $1.html 29 echo "</pre>" >> $1.html 30 echo "</fieldset>" >> $1.html 31 32 sed -i -e 's/<\/a>/<\/b>/g' $1.html 33 sed -i -e 's/<a name="line[0-9]*">/<b>/g' $1.html 34 35 echo "generate $1.html" 組合語言和 C 語言的效果: http://descent-incoming.blogspot.tw/2012/05/0-hello-xyz.html ( https://goo.gl/Ak3qyt ) // 本文使用 Blog2BBS 自動將Blog文章轉成縮址的BBS純文字 http://goo.gl/TZ4E17 // blog 原文 http://descent-incoming.blogspot.tw/2011/09/source-code-to-html.html ※ 引述《freexq (快樂蕃茄)》之銘言： : 大家好，請教各位幾個問題。 : 我想要在我的 Blooger 寫文章 : 文章內會有程式碼 : 我希望不只是單純的 copy & paste : 因為那樣子程式碼會變得很醜... : 所以google了一下，找到範例 : 請看 : http://cookieandcoketw.blogspot.tw/2012/02/java-a020_2137.html : http://ssc24.blogspot.tw/2011/09/a010.html : 以上兩個blog : 是我想要美化呈現的程式碼例子 : 像是有方框、行號、自動變色等等功能... : 問題來了，該如何做才能有以上的效果呢? : 煩請不吝告知，謝謝。 -- 紙上得來終覺淺，絕知此事要躬行。 -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 223.142.100.144 ※ 文章網址: https://www.ptt.cc/bbs/Blog/M.1475412648.A.005.html