[Blog] Google Code Prettify

Google Code Prettify

為了讓code放在網頁上,找了很多方法,相信Google的東西依定讓人驚奇,看到別人做的網頁,感覺很不錯。

參考以下官網:


Google Blogger上則不用下載,只要修改範本:

<head>後加入下列code:

<link href='http://huaning.myweb.hinet.net/Prettify/prettify.css' rel='stylesheet' type='text/css'/>
<script src='http://huaning.myweb.hinet.net/Prettify/prettify.js' type='text/javascript'/>

<body>改成

<body onload='prettyPrint()'>

中間再加入下列code,這樣就有code外面的框架:

code {
display: block;
font-family: 'Verdana';
font-size: 8pt;
/*font-weight: bold; */
overflow: auto;
white-space: nowrap;
border: 1px solid #7F7F7F;
padding: 10px 10px 10px 21px;
max-height: 500px;
line-height: 1.5em;
letter-spacing: 0px;
color: #000000;
background: #fbfaf7 url(http://sites.google.com/site/xinyu0123/Home/BG_CODE.gif) left top repeat-y;
}
cmd {
display: block;
font-family: 'Verdana';
font-size: 10pt;
overflow: auto;
border: 1px solid #2F4F4F;
padding: 5px 5px 8px 20px;
max-height: 1200px;
line-height: 1.2em;
letter-spacing: 0px;
color: #FFFFFF;
background: #000000 url(http://sites.google.com/site/xinyu0123/Home/BG_CMD.gif) left top repeat-y;
}

再用下面將code包起來

<code class="prettyprint"> </code>

用這個來斷行

<br />

Comments

Popular posts from this blog

[Linux] UVC Camera

UPnP Device Implementations

[UPnP] UPnP Implementers Corporation & UPnP Forum