文章插入程式碼 - 部落格

我用了 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
: 是我想要美化呈現的程式碼例子
: 像是有方框、行號、自動變色等等功能...
: 問題來了，該如何做才能有以上的效果呢?
: 煩請不吝告知，謝謝。

--
紙上得來終覺淺，絕知此事要躬行。

--