將程式碼轉成網頁格式, 貼到 blogger (in linux)

the 1st edition: 20110923 (5)
the 2nd edition: 20170427 (4)
the 3rd edition: 20200901 (2)

要在 blog 貼上程式碼 (source code ex: c/c++/組合語言), 需要先將程式碼轉成 html 語法, 花費的力氣比我想像中的大, google 好幾天, 找到以下幾個方法, 不是太複雜 (要修改一堆 css/js ) 就是不合我用, 我只需要行號和語法顏色。當然, 要能在 linux 下使用。

1. code2html
2. vi 的 :TOhtml
3. HTML Encoder
4. 將程式碼轉成網頁格式
5. 在 Blogger 文章中利用 CSS Block 及 Google Code Prettify 顯示程式碼

最後選了item 1 的 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 css: 有邊框的效果

1 <pre style="border: 1px inset ; margin: 0px; padding: 6px; overflow: auto; width: 600px; text-align: left;">
2 </pre>

pre css: 可將程式碼自動換行

1 <pre style="white-space: pre-wrap;">
2 <pre>

code2html 支援的語言

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 #!/bin/sh
2
3 echo "<fieldset><legend>$1</legend>" > $1.html
4 code2html -H -n -l $2 $1 >> $1.html
5 echo "</fieldset>" >> $1.html

組合語言

./h.sh 5M_mem_rw_mix_c.S gpasm

c 語言

./h.sh k.c c

清除 number link: blogger 會自動補上 href tag 的內容, 像 list 1 那樣, 造成整個 html 很混亂, 所以把 a tag 換成 b tag, 使用 sed_cmd 來處理即可。

list 1

1 <a href="http://www.blogger.com/blogger.g?blogID=3574663204983450" name="line2"> 2</a> #include "io.h"
2 <a href="http://www.blogger.com/blogger.g?blogID=3574663204983450" name="line3"> 3</a>
3 <a href="http://www.blogger.com/blogger.g?blogID=3574663204983450" name="line4"> 4</a> /*
4 <a href="http://www.blogger.com/blogger.g?blogID=3574663204983450" name="line5"> 5</a>&nbsp; * c bootloader
5 <a href="http://www.blogger.com/blogger.g?blogID=3574663204983450" name="line6"> 6</a>&nbsp; */

sed_cmd

 sed -i -e 's/<\/a>/<\/b>/g' simple_proc.S.html 
 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"

用法: h.sh prog.c
會輸出 prog.c.html, 貼到 blogger 即可。

本篇文章的指令和程式碼都是使用 h.sh script 轉出。

組合語言和 C 語言的效果:
作業系統之前的程式 (0) - hello XYZ