Anyway, I finally found SyntaxHighlighter. It's a tool that works with Blogger. Yay! I found about 5 tutorials on using it, but none of them told me where to put the code with this new improved version of Blogger. (Which I really like.) So here's some instructions.
1.) Go to your Blogger blog and click Design in the upper right-hand corner of your blog.
2.) On the left navigation menu, click Template.
3.) Under the snapshot of your blog, click the Edit HTML button.
4.) When the warning pops up, click Proceed.
5.) Directly after the <head> tag, paste the following code:
<!-- CSS Styles --> <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/shCoreDefault.css' rel='stylesheet' type='text/css'/> <!-- Choose a new theme if you want from http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/ --> <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> <!-- JS Scripts --> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js' type='text/javascript'/> <!-- Brushes --> <!-- Get additional brushes by selecting them at http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/ --> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.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/shBrushCSharp.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.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/shBrushJScript.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/> <!-- Call SyntaxHighlighter and include the switch for using on Blogger --> <script language='javascript' type='text/javascript'> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.all(); </script>
6.) If you wish to add languages, you can just copy and paste a new line and replace the *.js file with one from the list here: http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
7.) If you wish to change the color scheme by using a different scheme,you can test them out and then replace the call to the default scheme, choosing from the ones on this page:
http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/. Note that this line isn't necessary, I just added it so changing the theme was easy.
8.) Click the Save button, then the Close button.
9.) When editing a post, select the Compose button and paste your code. I usually type some placeholder text after the code, so that new things I type later don't get accidentally sucked into the code block. Ex:
def method_missing(sym, *args, &block)
@browser.send sym, *args, &block
end
10.) Click the HTML button and add these <pre> tags around your code:
<pre class="brush: ruby">
def method_missing(sym, *args, &block)<br />
@browser.send sym, *args, &block<br />
end<br />
</pre>
When you preview, you will end up with something like this:
def method_missing(sym, *args, &block) @browser.send sym, *args, &block endA few caveats.
1.) When previewing, you cannot scroll your code to the right. It will work when you view the page.
2.) If you can't get a brush name to work, look at this page for brush aliases. http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
3.) If you improperly close your opening <pre> tag by forgetting a second double quote, when you go back to Compose, everything after it will be deleted. I suggest saving before you attempt to add code blocks.
No comments:
Post a Comment