SyntaxHighlighter

比較過幾個在Blog顯示原始碼的方案後,裝了SyntaxHighlighter,主要是因為它持續都有在更新,用的人也是最多,而且不想自己找空間放的也提供直連,安裝很簡單、使用也很簡單,效果相當不錯。

下面拿現用模板當範例,分別是XML跟CSS:

XML的部份因為Blogger的發文系統會誤判<html>和<body>,索性就都拿掉囉!

body {background: rgb(250,250,250); color: rgb(75,75,75); font-size: medium; line-height: 150%;}
#upperwrapper {margin: auto; width: 760px;}
#lowerwrapper {background: rgb(225,225,225); border-top: 1px solid rgb(200,200,200);}
#widgetwrapper {margin: auto; width: 760px;}
#widget-left {width: 33%; float: left;}
#widget-center {width: 34%; float: left;}
#widget-right {width: 33%; float: left;}
#footerwrapper {clear: both; margin: auto; padding-top: 25px; width: 760px;}

.Header {margin-bottom: ;}
.titlewrapper {float:left; margin-right: 10px;}
#header-inner h1 {border-right: 1px solid rgb(150,150,150); color: rgb(25,25,25); padding: 10px 10px 10px 0;}
.descriptionwrapper {padding: 30px;}
.description {font-size: small;}

#picasa {text-align: center;}
#picasa img {border: 1px solid rgb(20,20,20);margin: auto 5px;}
#picasa + p {font-size: x-small; padding-right: 8px; text-align: right;}

.Blog hr {border-top: 1px solid rgb(75%,75%,75%); border-bottom: none; height: 1px; width: 75%;}
.date-header {border-top: 1px solid rgb(225,225,225); display: none;}
.post {border-bottom: 1px solid rgb(150,150,150); margin-bottom: 30px;}
.post-title {font-size: medium; text-shadow: rgb(30%,30%,30%) 0 0 1px;}
.post-title a {border-bottom: 1px dotted rgb(100,100,100); color: rgb(25,25,25);}
.post-body {}
.post-body a{text-decoration: underline;}
.post-footer {color: rgb(50,50,50); font-size: small; padding-top: 10px; text-align: right;}
.post-footer span {border-top: 1px dotted rgb(150,150,150);}
.post-footer-line-1 > span::before {}
.post-footer-line-1 > span::after {color: rgb(125,125,125); content: "|";}
.post-author {display: none;}
.post-icons {display: none;}

#comments {font-size: small;}
#comments h4 {font-size: large;}
#comments-block {margin-left: 0;}
.comment-author {float: left;}
.comment-body {border-left: 1px solid rgb(175,175,175); margin-bottom: 40px; margin-left: 30%; padding-left: 20px;}
.comment-footer {display: none;}
.comment-form {clear: both;}

#blog-pager {font-size: smaller; margin-top: 10px;}
#blog-pager-older-link {float: left;}
#blog-pager-older-link::before {content: "\00AB";}
#blog-pager-newer-link {float: right;}
#blog-pager-newer-link::after {content: "\00BB";}
.home-link {display: none;}
.blog-feeds {display: none;}
.post-feeds {display: none;}

#widgetwrapper {font-size: small;}
#widgetwrapper a:hover {text-decoration: underline;}
#widgetwrapper .widget {padding: 20px 0 10px;}
.widget h2 {font-size: medium;}
.profile-img {background: rgb(255,255,255); padding: 2%;}
.BlogArchive li {border-bottom: 1px solid rgb(75%,75%,75%) !important;}
.BlogArchive a {text-decoration: none !important;}

#footerwrapper {color: rgb(100,100,100); font-size: x-small;}

.widget-item-control {display: none;}
a {color: rgb(50,50,50); text-decoration: none;}
a:hover {color: rgb(0,0,0);}
blockquote {margin-bottom: 25px;}
blockquote::before {content: open-quote; font-size: xx-large;}
blockquote::after {content: close-quote; float: right; font-size: xx-large;}