Blogger剛開幕就先來寫一篇如何將程式碼貼到Blogger上
因為想要將一些自己學習的程式碼貼到Blogger上來跟大家分享,但是剛剛試了一下
如果只是單純的使用Google Code Prettify將程式碼包起來,那麼程式碼雖然會有顏色,但沒有行號總覺得看起來總不是那麼方便
使用Google Code Prettify效果如下:
public class HelloWorld {
public static void main (String[] args) {
System.out.println("Hello, world!");
}
}
使用
Google Code Prettify也很簡單,只要在code前後加上<pre class="prettyprint"></pre>,就可以為你的程式碼上色了
但是今天我想要的使用行號的程式碼,所以在經過Google大神的指導下,我找到了
SyntaxHighlighter
先來看一下效果:
public class HelloWorld {
public static void main (String[] args) {
System.out.println("Hello, world!");
}
}
跟
Google Code Prettify是不是多了行號感覺更好呢?(我是這樣覺得哈哈)
那麼,上面說了這麼多廢話,就來看看怎麼使用
SyntaxHighlighter吧!
SyntaxHighlighter的官方網站是 :
點我
SyntaxHighlighter的使用方法也很簡單,首先先到你的Blogger管理頁面,接著點擊範本→編輯HTML
接著將下列的Code貼到<head></head>當中
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPerl.js' type='text/javascript'></script>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
接著只要在你的程式碼的上下用<pre class="brush: java"></pre>包起來
就會有效果拉~
其中class內的java屬性是可以替換的,
目前提供了以下的種類:
actionscript3
bash, shell
c-sharp, csharp
cpp, c
css
delphi, pas, pascal
diff, patch
groovy
js, jscript, javascript
java
jfx, javafx
perl, pl
php
plain, text
ps, powershell
py, python
rails, ror, ruby
scala
sql
vb, vbnet
xml, xhtml, xslt, html, xhtml
好啦,大致上就是這樣了,如果有問題的話可以到SyntaxHighlighter官網看看,或是在下面和我交流一下~