WangAguo wa wa wa: 自動將貼到Blog的程式碼Code或HTML Code做轉換及編排

2007年7月4日星期三

自動將貼到Blog的程式碼Code或HTML Code做轉換及編排

因為希望可以直接把寫好的程式碼貼到Blog上，又能夠保持他原來的格式，並且做好排版，之後還要方便修改，因此寫了一個小javascript＋css來完成這件事情，結果會如下：

<html>
<body>
嘿嘿!
</body>
</html>

主要的做法是將程式碼放在<code>中，並用註解將程式碼包起來，來避免Browser拿Code去用，如下:
由於Blogger不能放入<![CDATA[ ]]>，因而使用，所以資料要再放同樣的符號就容易產生問題！！

----
<code>
<--
這裏放程式碼
-->
</code>
----

再於<head>中加入以下兩行．

<link type="text/css" rel="stylesheet" href="http://newname.openfoundry.org/CodeDisplay/CodeDisplay.css"></link>
<script src='http://newname.openfoundry.org/CodeDisplay/CodeDisplay.js' type='text/javascript'></script>

在Google Blogger的小工具"HTML/JavaScript"中使用的方法
由於這個小工具會把css的設定吃掉(放入後存檔就消失了)，因此要做一點改寫，如下。

<script type="text/javascript">
  document.write('<link type="text/css" rel="stylesheet" href="http://newname.openfoundry.org/CodeDisplay/CodeDisplay.css"></link>');
</script>
<script src="http://newname.openfoundry.org/CodeDisplay/CodeDisplay.js" type="text/javascript"></script>