[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
Post a Comment