How can I display code better on my blogger blog?
Question
These days, in any site where they show a code fragments (even in Stackoverflow), the code is nicely wrapped 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?
7 answers
solution1
21 ACCPTED 2009-10-29 17:51:43
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>
solution2
2 2009-10-29 14:43:48
solution3
2 2010-11-11 04:08:59
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 .
solution4
1 2009-10-29 16:35:31
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
solution5
0 2014-07-19 15:41:18
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
solution6
0 2015-12-02 16:17:21
I found one website which converts my code to the blogger compatible format. It meets my need and takes almost no time.
solution7
0 2018-09-30 10:50:35
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 technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.