How can I use Prettify with Blogger/BlogSpot?

Javascript Blogger Shared Hosting Prettify

Javascript Problem Overview

I'm using blogger.com to host some texts on programming, and I'd like to use Prettify (same as Stack Overflow) to nicely colour the code samples.

How do I install the Prettify scripts into the blog domain? Would it be better (if indeed it's possible) to link to a shared copy somewhere? I have webspace on a different domain. Would that help?

Javascript Solutions

Solution 1 - Javascript

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, log in, and navigate to Posting → Edit Posts → Edit. In there put this at the top:

<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/lang-css.min.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(function() {
    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>

Note that you shouldn't use prettyPrint directly as an event handler. It confuses it (see the readme for details). Which is why we're passing addLoadEvent a function that then turns around and calls prettyPrint.

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 "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: https://www.freeformatter.com/html-escape.html

You can put the top code in your HTML layout, so that it’s included for all pages by default if you like.

As of 2012, you can link CSS files in Blogger, so adding this to the <head> should be enough:

<link href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/lang-css.min.js"></script>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded',function() {
        prettyPrint();
    });
</script>

I chose not to replace the body onload event on purpose. Instead, I'm using the new DOMContentLoaded event that the old browsers don't support. If you need old browser support, you can use any other load event to initiate prettyPrint, for example jQuery:

jQuery(function($){
    prettyPrint();
});

Or the supposedly smallest domready ever

And you're done :)

As Lim H pointed out in the comments, in case where you use the Blogger dynamic views (Ajax templates) then you need to use the method described here to bind custom JavaScript code: https://stackoverflow.com/questions/14540009/prettyprint-doesnt-get-called-on-page-load

Use the guide at GitHub: https://github.com/google/code-prettify

Basically just use this :)

<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js"></script>
<pre class="prettyprint"><code class="language-css">...</code></pre>

Solution 2 - Javascript

The following worked for me immediately.

Go to Blogger > Layout > Edit HTML
Copy the following snippet and paste it immediately after <head> in the "Edit template" field:

snippet:

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

After </head> replace <body> with <body onload='prettyPrint()'>
Click "SAVE TEMPLATE"
Go to Blogger > Posting > New Post
Make sure you're editing the HTML by clicking on "Edit HTML." In the empty field try:

<pre class="prettyprint">int foo=0; NSLog(@"%i", foo); </pre>

Notice if you click "Preview" now you'll see this code in black only. Don't worry (yet).
Click "PUBLISH POST" and then "VIEW BLOG". Your code should be prettified.

Solution 3 - Javascript

Nowadays, Google Code Prettify has an auto-loader script. You can load the JavaScript and CSS for prettify via one URL.

Add the script to the <head> section of your Blogger template and it will work on all your posts:

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

More detail is on Getting Started.

Solution 4 - Javascript

It's very simple to add the Google Code prettifier in your Blogger account.

Just include the below JavaScript library in your Blogger account just before tag.

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

Just like in the below picture...

Enter image description here

Now you have successfully added the Google Code prettifier to your Blogger account.

Now if you want to insert code in your Blogger post, add code (HTML, CSS, PHP and etc.), and insert that code between

....

tags.

 <pre class="prettyprint">...</pre>

<code class="prettyprint">...</code>

Demo of the Google Prettify on Blogger

Also please refer to this documentation for adding this Google prettifier to Blogger in the following link.

Syntax Highlighter For Blogger Using Google Prettify

Solution 5 - Javascript

Have a look at SyntaxHightlighter.

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.

Solution 6 - Javascript

Another solution is to use the syntaxhighlighter 2.0 JavaScript library. I've used it on my blog and it seems to work quite well.

Here's a blog post about it:

Syntax Highlighting with Blogger Engine

Solution 7 - Javascript

It is not a direct answer to your question, but it is worth considering 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.

Solution 8 - Javascript

cdnjs is providing the library "SyntaxHighlighter".

Go to Blogger → Template → Edit template. Add the below code just before the ending of the body tag and save the template.

I have given a example for Python.

You can link the other language script files from cdnjs.

Syntax highlight code

<pre class="brush: py">
    print("Hello, World!")
</pre>

For other languages, go and copy the script: https://cdnjs.com/libraries/SyntaxHighlighter

<!-- Syntax highlighter-->
<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDefault.css' rel='stylesheet'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shAutoloader.min.js'/>

<!-- For Python -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPython.min.js'/>

<!-- Include other languages, like JavaScript and PHP -->
<script language='javascript'>
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
</script>

Solution 9 - Javascript

Here is the solution that works for me. Add in the <head>...</head> of the dynamic Blogger HTML:

<script>
    $(window.blogger.ui()).on('viewitem', function (event, post, element) {
        prettyPrint();
    });
</script>

Solution 10 - Javascript

Go to the Blogger theme section and click on edit HTML.. Then add a reference to the Google Prettify CDN to the head tag of the HTML.

Solution 11 - Javascript

My way is simple and has mobility.

Go to your Blogger account click Theme → Customize → Advanced → Add CSS.

Then paste the below CSS code.

code {
    font-family: Courier, monospace;
    color: #000;
    background-color: #f8f9fa;
    border: 1px solid #eaecf0;
    border-radius: 2px;
    padding: 1px 4px;
}
pre, .mw-code {
    padding: 5px;
    font-family: Courier, monospace;
    font-size: inherit;
    line-height: 1rem;
    color: #000;
    background-color: #f8f9fa;
    border: 1px solid #eaecf0;
    padding: 1em;
    white-space: pre-wrap;
    overflow-x: hidden;
    word-wrap: break-word;
}

To make things work, for example:

To check the MX record of a domain <code> nslookup </code> (in Windows):<br />

<pre>temp = foo
foo = bar
bar = temp
</pre>

Content Type	Original Author	Original Content on Stackoverflow
Question	billpg	View Question on Stackoverflow
Solution 1 - Javascript	Timo Huovinen	View Answer on Stackoverflow
Solution 2 - Javascript	SK9	View Answer on Stackoverflow
Solution 3 - Javascript	Badaro	View Answer on Stackoverflow
Solution 4 - Javascript	muni	View Answer on Stackoverflow
Solution 5 - Javascript	Jeroen-bart Engelen	View Answer on Stackoverflow
Solution 6 - Javascript	CraftyFella	View Answer on Stackoverflow
Solution 7 - Javascript	Jeff Foster	View Answer on Stackoverflow
Solution 8 - Javascript	anjaneyulubatta505	View Answer on Stackoverflow
Solution 9 - Javascript	Artur A	View Answer on Stackoverflow
Solution 10 - Javascript	user7090620	View Answer on Stackoverflow
Solution 11 - Javascript	Junayed	View Answer on Stackoverflow

How can I use Prettify with Blogger/BlogSpot?

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

Solution 2 - Javascript

Solution 3 - Javascript

Solution 4 - Javascript

Solution 5 - Javascript

Solution 6 - Javascript

Solution 7 - Javascript

Solution 8 - Javascript

Solution 9 - Javascript

Solution 10 - Javascript

Solution 11 - Javascript

Is there any reason to choose new over init when defining a metaclass?

How do you determine 32 or 64 bit architecture of Windows using Java?

Attributions

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

Solution 2 - Javascript

Solution 3 - Javascript

Solution 4 - Javascript

Solution 5 - Javascript

Solution 6 - Javascript

Solution 7 - Javascript

Solution 8 - Javascript

Solution 9 - Javascript

Solution 10 - Javascript

Solution 11 - Javascript

Is there any reason to choose __new__ over __init__ when defining a metaclass?

How do you determine 32 or 64 bit architecture of Windows using Java?

Attributions

Is there any reason to choose new over init when defining a metaclass?