Hi everyone.
I'm using blogger.com to host some texts on programming, and I'd like to use prettify (same as stackoverflow) to nicely colour the code samples.
How do I install the prettify scripts into the blog domain?
Would it be better (if indeed its possible) to link to a shared copy somewhere?
I have webspace on a different domain. Would that help?
Many thanks.
Not a direct answer to your question, but worth consider GitHub. You can get a free account and get syntax colored "gists" which you can share and host on your web page.
The downside is that the copy is hosted on Github's site and if that's down, then it's down for you too.
Have a look at SyntaxHightlighter at http://alexgorbatchev.com/wiki/SyntaxHighlighter On that site you can also find instructions on how to use it at blogger.com and the site offers a hosted version of the required scripts so you don't need to host files somewhere yourself.
When you make a new entry in blogger, you get the option to use HTML in your entry and to edit your blog entries.
so type http://blogger.com , then login, then Posting>Edit Posts>Edit then in there put this at the top:
<script type="text/javascript" language="javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
<script type="text/javascript" language="javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/lang-css.js"></script>
<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>
<style type="text/css">
/* Pretty printing styles. Used with prettify.js. */
.str { color: #080; }
.kwd { color: #008; }
.com { color: #800; }
.typ { color: #606; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #000; }
.tag { color: #008; }
.atn { color: #606; }
.atv { color: #080; }
.dec { color: #606; }
pre.prettyprint { padding: 2px; border: 1px solid #888; }
@media print {
.str { color: #060; }
.kwd { color: #006; font-weight: bold; }
.com { color: #600; font-style: italic; }
.typ { color: #404; font-weight: bold; }
.lit { color: #044; }
.pun { color: #440; }
.pln { color: #000; }
.tag { color: #006; font-weight: bold; }
.atn { color: #404; }
.atv { color: #060; }
}
</style>
in this case because blogger does not allow us to link to the stylesheet, we just embed the prettify.css contents.
then add a <code></code> tag or a <pre></pre> tag with the class name of "prettyprint", you can even specify the language like this "prettyprint lang-html"
so it can look like this
<pre class="prettyprint lang-html">
<!-- your code here-->
</pre>
or like this
<code class="prettyprint lang-html">
<!-- your code here-->
</code>
the code that you put in needs to have its HTML cleaned from < and > to do this just paste your code in here: http://www.simplebits.com/cgi-bin/simplecode.pl
you can put the top code in your HTML layout so that its included for all pages by default if you like.
and your done :)
Hi,
Another solution is to use the syntaxhighlighter 2.0 java script library. I've used it on my blog and it seems to work quite well.
Here's a post about it:
http://www.craftyfella.com/2010/01/syntax-highlighting-with-blogger-engine.htmllink text
Cheers.
The following worked for me immediately.
<head>" in the "Edit template" field:<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' rel='stylesheet' type='text/css'/>
<script src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' type='text/javascript'></script>
</head>" replace "<body>" with "<body onload='prettyPrint()'>"<pre class="prettyprint">int foo=0;
NSLog(@"%i", foo);
</pre>