As the majority of my posts will be, most probably, technical - I guess that embedding code snippets into my blog, will become a common scenario.
It's quite strange for me that blogger doesn't have built-in mechanism for beautifying code snippets; after all it's Google, isn't it?
In order to move on, I'm looking for a a strategy to embed code snippets right here.
This is not the first, nor the last discussion on the topic, but I found this stackoverflow thread very informative.
My love-at-first-sight was gist.
Gist is a simple way to share snippets and pastes with others. All gists are git repositories, so they are automatically versioned, forkable and usable as a git repository
- It's easy
- I trust github to host my code, so naturally I do for my snippets
- Code formatting and syntax-highlighting is beautiful
On the down side:
- Editing an old post require editing of both the blog source here at blogger, as well as the gist at github
- Page load will have to wait for the gist script parsing
- I can't see the code when I'm typing in the blogger editor. (gist is being embedded only at runtime)
Embedded gist will look like this:
Second option is to add to my blogger's template client implementation of code formatting and syntax highlighting.
Syntaxhighlighter is here to help a developer/coder to post code snippets online with ease and have it look pretty. It's 100% Java Script based and it doesn't care what you have on your server.This will give a whole new meaning to the <pre> tag wrapping your code.
Taken from the demo site:
// SyntaxHighlighter makes your code snippets beautiful var setArray = function(elems) { this.length = 0; push.apply(this, elems); return this;}This will allow me to see the snippet while editing the blog, and the result is satisfying.
But again, it's a runtime technique that require adding additional scripts and styles on top of the blogger template. The implication is more time to wait before you can actually start reading this. Performance is too important.
Last but not least is the <pre> tag which is according to the spec:
The <pre> tag defines preformatted text.
Text in a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.
It is embedded and dependent only on the browser, it is supported on all browsers and even on almost browsers ;) and it's integral part of the post source.
True. It doesn't get the wow effect that real syntax parser can make, but I like the result; I even think it looks classic.
A Javascript snippet wrapped in an <pre> tag will look like that:
var Person = Ember.Object.extend(Ember.Evented, {
/**
* @property name {String}
* @public
*/
name: null,
/**
* Called when the name property has changed.
* @event nameDidChanged
* @param newName
*/
/**
* @method
*
* raise an {@link Person#nameDidChanged} if value of {@link Person#name} has been changed
*
* @private
*/
_applyName: function _applyName () {
this.trigger('nameDidChanged', this.get('name'));
}.observes('name')
});
I do think that I will go for the pre tag for now.
KISS,
Eran
