How can I display code better on my blogger blog?

U

7

25

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?

Uranium answered 29/10, 2009 at 14:39 Comment(0)

S

22

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>

Shipe answered 29/10, 2009 at 17:51 Comment(3)

Hi ..is it possible for youto give CSS n Javascript which is used for stackoverflow code.The way codes are displayed in stackoverflow is awesome.. any suggestions ? – Thrombosis 28/6, 2011 at 8:10

My blog looks pretty thank you :) code-like-a-poem.blogspot.in/2013/04/… Just a note, for more brushes alexgorbatchev.com/SyntaxHighlighter/manual/brushes – Scheers 20/4, 2013 at 13:41

I added this to my blog ( http://cosgunvistas.blogspot.in ) and works fine . I also added some more brushes and used custome theme. – Distilled 4/10, 2015 at 13:57

B

2

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/

Belomancy answered 29/10, 2009 at 14:43 Comment(2)

How do i use them in my Blogger blog – Uranium 29/10, 2009 at 14:52

The syntax highlighter in your first link is an old version. – Shipe 29/10, 2009 at 19:43

M

2

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

Mallis answered 29/10, 2009 at 16:35 Comment(0)

S

2

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.

Scree answered 11/11, 2010 at 4:8 Comment(0)

Q

2

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.

Quesenberry answered 30/9, 2018 at 10:50 Comment(0)

H

0

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

Housecoat answered 19/7, 2014 at 15:41 Comment(0)

W

0

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

Witmer answered 2/12, 2015 at 16:17 Comment(0)

Recommended topics

Hot tags