how to show code snippet in blogs

Question

I have a little blog on blogger.com and I use a simple free template that I found out there. Occasionally I post code snippets about my findings. The code gets formatted in a pretty ugly way. I see out there that some bloggers they have fancy template for showing the code.

Where do I find such template for blogger? Or what can I do to achieve the same thing?

Thanks, mE

possible duplicate of [How can I display code better on my blogger blog?](http://stackoverflow.com/questions/1644201/how-can-i-display-code-better-on-my-blogger-blog) — paulmorriss, Jan 17 '14 at 10:37
I have the same problem but solved it by looking at this tutorial. — , Oct 28 '13 at 21:29
To Show code snippet, Take a look at below article https://www.dotnetexample.in/2018/09/display-code-snippet-in-blogger.html — anomepani, Sep 30 '18 at 11:51

score 11 · Accepted Answer · answered Sep 11 '13 at 01:10

11

I have to regularly insert code snippets into blogposts. The easiest way that I have found is to keep a markdown file on github and then copy the code snippets onto the blog. It comes with full syntax highlighting in the language of your choice. And no plugins and intuitive, easy to use.

For example, if you write in Ruby, All you need to do is to write this

```ruby
  [Your ruby code goes here]
```

As an example, this is a blog post I recently released with syntax highlighting http://blog.iron.io/2013/09/ironcast-1-introduction-to-ironworker.html

And this is the markdown file that corresponds to the blog posts. https://github.com/iron-io/ironcasts-series-1/blob/master/Code-Snippets.md

PS: if you want a faster way to edit your markdown, I would also suggest http://dillinger.io/ for fast editing

answered Sep 11 '13 at 01:10

samol

18,950
32
88
127

Can you elaborate on the "copy the code snippet onto the blog" part in detail? – Suhas Oct 30 '13 at 22:07
1

@Suhas, so basically highlight the code snippet in your gist and then copy and paste that into blogspot. This works because the copy also copies all the html (which contains the highlighting) and when html is pasted into blogspot, it will be rendered. – samol Nov 27 '13 at 06:46
1

page not available – programtreasures Dec 09 '17 at 15:55
Use Gist to show code snippet.Take a look at below article https://www.dotnetexample.in/2018/09/display-code-snippet-in-blogger.html – anomepani Sep 30 '18 at 11:52

score 7 · Answer 2 · answered Jul 08 '10 at 20:38

You can use SyntaxHighlighter, the author has provided a hosted version so you just have to go to your blog template, choose edit HTML and add following code to the beginning of the page

<link href='http://alexgorbatchev.com/pub/sh/2.0.320/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.0.320/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPowerShell.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushDiff.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushSql.js' type='text/javascript'/>
<script type='text/javascript'>
  SyntaxHighlighter.all();
</script>

You can see example on my blog

Just for reference, that syntax is highlighted in a kinda ugly way. Just pointing out the irony in a post about how to fix such things. :) — cHao, Jul 08 '10 at 20:54
Without using external js you can Use Gist to show code snippet. Take a look at below article https://www.dotnetexample.in/2018/09/display-code-snippet-in-blogger.html — anomepani, Sep 30 '18 at 11:53

score 7 · Answer 3 · edited Oct 24 '18 at 13:29

I struggled trying to get SyntaxHighlighter to work for a long time (Chrome and Blogger produced horrible scrolling divs).

I finally settled on Google Code Prettify. It seems more straight forward than SyntaxHighlighter, but works great.

Everything you need to know can be found in the README

Load the script in the <head> section of the blogger template:

<script language='javascript' type='text/javascript' 
    src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' />
<script language='javascript'  type='text/javascript' 
    src='http://google-code-prettify.googlecode.com/svn/trunk/src/lang-css.js'/>

<script type='text/javascript'>
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
addLoadEvent(prettyPrint);
</script>

The format using <pre class="prettyprint"> or <pre class="prettyprint lang-yaml">' or inline with <code class="prettyprint">.

Oh, it supports multiple languages and themes.

score 5 · Answer 4 · answered Jun 15 '13 at 01:56

You can also embed files from Bitbucket or Gists from Github:

How to:

Bitbucket (Only for non-dynamic views)

Create a Bitbucket account if you don't have one
Create a repository and push your code
Open one of your source files like this one and click on embed.
Copy the javascript to your post.

Gist (For non-dynamic views. See below for dynamic views)

Create a Github account if don't have one.
Go to Gist and pase your code in a gist.
Create a Gist like this one and click on embed.
Copy the javascript in your post

Gist for Blogger Dynamic Views

See Moski's tutorial

score 1 · Answer 5 · answered Jul 08 '10 at 20:38

Usually, there are plugins to achieve what you're looking for (Wordpress has tons and tons), but I'm not sure about Blogger.

You can probably use Javascript to do the same thing; here's an example: http://www.halhelms.com/blog/index.cfm/2008/12/11/Code-Formatting-in-Blog-Pages-with-jQuery

Or this: http://www.craftyfella.com/2010/01/syntax-highlighting-with-blogger-engine.html

score 0 · Answer 6 · answered Aug 11 '13 at 19:51

Most blogger users use blockquote for showing codes. Which is a very wrong approach. Blockquotes are meant for showing exerts from different webpages which when used for codes formats them to an ugly looking style. Use <pre> and <code> tags for showing your codes. Browser's will then show your codes like they are meant to. Here's the format -

<pre>
<code>
your code goes here
</code>
</pre>

Read more about why using these tags for blogger - http://www.howtokickblogger.com/2013/06/blockquote-code-or-pre-tag-for-blogger.html

score 0 · Answer 7 · answered Dec 25 '13 at 10:46

0

I use the syntaxhighlighter 3+ javascript library. I wrote a simple post for blogger which is a more optimized configuration.

http://modelarchitecture.blogspot.com/2013/12/configuring-javascript-syntaxhighligher.html

answered Dec 25 '13 at 10:46

Ted Johnson

4,315
3
29
31

score 0 · Answer 8 · answered Jan 06 '14 at 09:01

0

I have implemented a tool which can format your code and show it in blogger. Try it here http://www.dukaweb.net/p/format-source-code.html.

The idea is using <pre><code> tag and count number of rows using javascript

answered Jan 06 '14 at 09:01

Calvin Duy Canh Tran

1,078
11
16

score 0 · Answer 9 · answered Feb 16 '14 at 13:20

You can use Google-Code-Prettify which is JavaScript module and css file. This can help you in syntax highlighting of your code snippets. Many big names in web-sphere are using Google-Code-Prettify to power syntax highlighting in their websites e.g. code.google.com and even stackoverflow.com. Here is a method for installing and using Google-Code-Prettify in Blogger.

how to show code snippet in blogs

9 Answers9