How can I display code better on my blogger blog?
These days, in any site where they show a code fragments (even in Stackoverflow), the code is nicely wrapped 开发者_JAVA技巧around a GUI element which highlights syntax elements, provides line numbers, etc. I want to show some ruby on rails code in my blog and I want those visual elements in my blog.
How can I accomplish this on my blogger blog?
Click on "Edit HTML" in Blogger and then insert the following in the <head> section of your HTML:
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushRuby.js"></script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shLegacy.js"></script>
<link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css" />
<link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css" /> <script language="javascript">
window.onload = function () {
dp.SyntaxHighlighter.ClipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
dp.SyntaxHighlighter.BloggerMode();
}
</script>
and the following into the <body> wherever you want to put your code:
<pre class="brush: ruby" name="code"># Your Ruby Code</pre>
Using the links Alex Reitbort provided you can integrate this in your Blogger blog using one of the following tutorials:
http://heisencoder.net/2009/01/adding-syntax-highlighting-to-blogger.html
http://yacoding.blogspot.com/2008/05/how-to-add-syntax-highlight-to-blogger.html
http://abhisanoujam.blogspot.com/2008/12/blogger-syntax-highlighting.html
SyntaxHighlighter is the way to go, but all the given links here did not work for me.
I found a complete, 2 step guide to installing the latest 3.x version in Blogger that actually works here.
http://code.google.com/p/syntaxhighlighter/
http://www.pseudocoder.com/blog/javascript-code-highlighter-chili-vs-syntaxhighlighter
http://www.1stwebdesigner.com/resources/16-free-javascript-code-syntax-highlighters-for-better-programming/
To display code in an article or to highlight code in blogger or in any other blogging platform you can use Github Gist, I found this way is very easy which doesn't depend on any external highlighting javascript library.
Here you can create any public gist for code snippet for javascript (.js), Csharp(.cs), shell script (.sh) etc So it can be loaded in article.
Once you saved gist file one link or Embed option is displayed on a gist as per above screenshot and you have to just paste in an article here I have attached a screenshot for blogger below
Once you have added embed script in blogger article you can see a preview of code snippet which rendered as below screenshot.
The issue with using Javascript to Dynamically create code syntax style at runtime are:
- Page loads slowly
- The initial look of the code displayed is in raw format
- Nevers works if javascript is disabled
The Better technique would be to just copy paste the HTML, generated using some convertors.
Online Syntax Highlight Generator Tool
codeworkout.blogspot.com/2014/07/online-generator-tool-for-code-syntax_18.html
I found one website which converts my code to the blogger compatible format. It meets my need and takes almost no time.
http://codeformatter.blogspot.de/2009/06/bugs-fixed.html
加载中,请稍侯......
精彩评论