how to show code snippet in blogs [closed]

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

Zitazitah

How about a link to one such blog with fancy code snippets? – Muffle

I have the same problem but solved it by looking at this tutorial. <danielthat.blogspot.com/2013/03/…> – Giltedged

possible duplicate of How can I display code better on my blogger blog? – Derogate

To Show code snippet, Take a look at below article dotnetexample.in/2018/09/display-code-snippet-in-blogger.html – Maddocks

Answer 1

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

Groundling

Can you elaborate on the "copy the code snippet onto the blog" part in detail? – Managing

@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. – Groundling

page not available – Transudation

Use Gist to show code snippet.Take a look at below article dotnetexample.in/2018/09/display-code-snippet-in-blogger.html – Maddocks

Answer 2

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

Haga

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. :) – Kittiekittiwake

Without using external js you can Use Gist to show code snippet. Take a look at below article dotnetexample.in/2018/09/display-code-snippet-in-blogger.html – Maddocks

Answer 3

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.

Mouton

Answer 4

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

How to:

Bitbucket (Only for non-dynamic views)

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

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

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

Gist for Blogger Dynamic Views

1. See Moski's tutorial

Tribble

Answer 5

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

Billfish

Answer 6

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

Yellowwood

Answer 7

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

Forint

Answer 8

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

Taam

Answer 9

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.

Kendall