<head>
<b:include data='blog' name='all-head-content'/>
<!-- adel zhang 20111214 -->
<!-- syntaxhighlighter -->
<script src="http://sites.google.com/site/triadelphous/filestorage/shCore.txt" type="text/javascript">
<script src='http://sites.google.com/site/triadelphous/filestorage/shBrushCpp.txt' type='text/javascript'/>
<script src='http://sites.google.com/site/triadelphous/filestorage/shBrushJScript.txt' type='text/javascript'/>
<script src='http://sites.google.com/site/triadelphous/filestorage/shBrushXml.txt' type='text/javascript'/>
<script src='http://sites.google.com/site/triadelphous/filestorage/shBrushJava.txt' type='text/javascript'/>
<script src='http://sites.google.com/site/triadelphous/filestorage/shBrushBash.txt' type='text/javascript'/>
<script src='http://sites.google.com/site/triadelphous/filestorage/shBrushCss.txt' type='text/javascript'/>
<link href='http://sites.google.com/site/triadelphous/filestorage/shThemeEmacs.css' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
SyntaxHighlighter.defaults["quick-code"]=false;
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.defaults["toolbar"] = false;
SyntaxHighlighter.all();
</script>
因为Blogger无法存储外部文件，所以将需要的js文件托管在Google Sites上。至于文件名为什么要改成txt,这是由于有帖子说
But Google Sites, like most free host doesn’t accept javascripts. Luckily there is a workaround -change the javascript file into a text file, by changing the file extension from .js to .txt.
Update:20111217
本来将下载的SyntaxHighlighter托管在Google Sites上，但不知为何链接不到了（上回测试时是可以的）。所以重新修改了模板，使用的是SytaxHighlighter作者提供的pub服务。
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEmacs.css' rel='stylesheet' type='text/css'/>
Update: 20120107
遇到的问题是如果代码行太长，则显示时会换行，这样就造成syntaxhighlighter的行号显示出现混乱，极为丑陋。后来发现添加shCore.css这个css后，它会出现滚动条，缓解了行号混乱的问题。但不爽的地方在于会出现竖直滚动条,原因在于shCore.css中对overflow属性使用了visible。所以我们在模板文件中加入下面这些css语句(这些类名是shCore.css里面定义的)，以消除竖直方向上的滚动条。特别注意 !important 的用法，它使得css不是按照通常的定义顺序来使用，而是使用有 !important 的css语句。
/* adel: 20120107
------------- for syntaxhighlighter -----------
------------- get rid of y-sroll --------------*/
.syntaxhighlighter a,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter table,
.syntaxhighlighter table td,
.syntaxhighlighter table tr,
.syntaxhighlighter table tbody,
.syntaxhighlighter table thead,
.syntaxhighlighter table caption,
.syntaxhighlighter textarea {
overflow-y: hidden !important;
}
之前的设置去掉了 toolbar，也就是提示syntaxhighlighter信息的小问号，想想还是加上为好。所以最终的代码为：
<!-- adel zhang 20120107 --> <!-- syntaxhighlighter --> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/> <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEmacs.css' rel='stylesheet' type='text/css'/> <script type='text/javascript'>SyntaxHighlighter.config.bloggerMode = true;SyntaxHighlighter.all();</script>
没有评论:
发表评论