Prepare your template to support code formatting
Go to your Blogger's blog online editor and choose "Template" from the menu at the left.
Click on "Edit HTML".
Within the code search for the closing head-tag
</b:template-skin>
<b:include data='blog' name='google-analytics'/>
</head>
<body expr:class='"loading" + data:blog.mobileClass'>
<b:section class='navbar' id='navbar' maxwidgets='1' name='Navbar' showaddelement='no'>
And copy the following code (only the links to the files you prepared for hosting) right before the end head-tag
<!-- Begin SyntaxHighlighter-->
<link href='{Host URL}/shCore.css' rel='stylesheet' type='text/css'/>
<link href='{Host URL}/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='{Host URL}/shCore.js' type='text/javascript'/>
<script src='{Host URL}/shBrushCpp.js' type='text/javascript'/>
<!--script src='{Host URL}/shBrushCpp.js' type='text/javascript'/-->
<!--script src='{Host URL}/shBrushCSharp.js' type='text/javascript'/>
<script src='{Host URL}/shBrushCss.js' type='text/javascript'/>
<script src='{Host URL}/shBrushJava.js' type='text/javascript'/>
<script src='{Host URL}/shBrushJScript.js' type='text/javascript'/>
<script src='{Host URL}/shBrushPhp.js' type='text/javascript'/>
<script src='{Host URL}/shBrushPython.js' type='text/javascript'/>
<script src='{Host URL}/shBrushRuby.js' type='text/javascript'/>
<script src='{Host URL}/shBrushSql.js' type='text/javascript'/>
<script src='{Host URL}/shBrushVb.js' type='text/javascript'/>
<script src='{Host URL}/shBrushXml.js' type='text/javascript'/>
<script src='{Host URL}/shBrushPerl.js' type='text/javascript'/-->
<script type='text/javascript'>
window.setTimeout(function() {
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
}, 20);
</script>
<!-- End SyntaxHighlighter-->
</head>
Test it
Let's put some source-code into a blog article to check if it shows up correctly. There are 2 possibilities how to do this:
Method 1:
<script type="syntaxhighlighter" class="brush: cpp"><![CDATA[
// 'Hello World!' program
#include <iostream>
int main()
{
std::cout << "Hello World!" << std::endl;
return 0;
}
]]></script>
Result:
1
2
3
4
5
6
7
8
9
| // 'Hello World!' program #include <iostream> int main(){ std::cout << "Hello World!" << std::endl; return 0;} |
Method 2:
<pre class="brush: cpp">
// 'Hello World!' program
#include <iostream>
int main()
{
std::cout << "Hello World!" << std::endl;
return 0;
}
</pre>
Result:
1
2
3
4
5
6
7
8
9
| // 'Hello World!' program #include <iostream> int main(){ std::cout << "Hello World!" << std::endl; return 0;} |
| Brush name | Brush aliases | File name |
|---|---|---|
| ActionScript3 | as3, actionscript3 | shBrushAS3.js |
| Bash/shell | bash, shell | shBrushBash.js |
| ColdFusion | cf, coldfusion | shBrushColdFusion.js |
| C# | c-sharp, csharp | shBrushCSharp.js |
| C++ | cpp, c | shBrushCpp.js |
| CSS | css | shBrushCss.js |
| Delphi | delphi, pas, pascal | shBrushDelphi.js |
| Diff | diff, patch | shBrushDiff.js |
| Erlang | erl, erlang | shBrushErlang.js |
| Groovy | groovy | shBrushGroovy.js |
| JavaScript | js, jscript, javascript | shBrushJScript.js |
| Java | java | shBrushJava.js |
| JavaFX | jfx, javafx | shBrushJavaFX.js |
| Perl | perl, pl | shBrushPerl.js |
| PHP | php | shBrushPhp.js |
| Plain Text | plain, text | shBrushPlain.js |
| PowerShell | ps, powershell | shBrushPowerShell.js |
| Python | py, python | shBrushPython.js |
| Ruby | rails, ror, ruby | shBrushRuby.js |
| Scala | scala | shBrushScala.js |
| SQL | sql | shBrushSql.js |
| Visual Basic | vb, vbnet | shBrushVb.js |
| XML | xml, xhtml, xslt, html, xhtml | shBrushXml.js |
沒有留言:
張貼留言