how to show code snippet in blogs [closed]_问答_开发者

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.

开发者_运维百科

Closed 8 years ago.

Improve this 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

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

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

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.

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

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

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

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

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

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.