比較過幾個在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;}