GitHub Style on Blogger

Here is how to display GitHub style on Blogger ============================================== Use https://github.com/sindresorhus/github-markdown-css and put css class `markdown-body`, e.g. `<div class="markdown-body">` 1. One 1. Two ```java Java java = new Java(); ``` <code class="prettyprint lang-java">Java java = new Java(); </code> | Tables | Are | Cool | | ------------- |:-------------:| -----:| | col 3 is | right-aligned | $1600 | | col 2 is | centered | $12 | | zebra stripes | are neat | $1 | Markdown | Less | Pretty --- | --- | --- *Still* | `renders` | **nicely** 1 | 2 | 3

How to use Syntax Highlighter (Code-Prettify) on Blogger

https://github.com/google/code-prettify Just put this line in the template of Blogger. ``` <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"> ``` And use `class="prettyprint"` <pre class="prettyprint">class Voila { public: // Voila static const string VOILA = "Voila"; // will not interfere with embedded <a href="#voila2">tags</a>. }</pre>

Markdown on Blogger with marked.js

Test ==== - a - b - c Using marked.js --------------- This is a trial. Tag test -------- <code> Here is a code. </code> As to use Markdown on Blogger, set this at the nearest place to the end tag of body. ```html <!-- Markdown: marked.js --> <script src="//cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script> <script> var md = document.getElementsByClassName('md')[0] var divElem = document.createElement('div') var mdMarked = marked(md.value) divElem.innerHTML = mdMarked md.parentNode.replaceChild(divElem, md) </script> ``` and write Markdown in md tag on HTML tab. For the dynamic template you should consider the top page which contains several articles, and write codes like, ```html <!-- jQuery --> <script src='//code.jquery.com/jquery-2.1.4.min.js'/> <!-- Markdown: marked.js --> <script src='//cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js'/> <script> jQuery.noConflict() jQuery("textarea").ready(function() { convMd() }) // for the rest of textarea elements jQuery("textarea").fadeIn(1000, function() { convMd() }) function convMd(){ //console.log("I showed up"); var mds = document.getElementsByClassName('md') for (var i=0, md; md = mds[i]; i++) { var divElem = document.createElement('div') var mdMarked = marked(md.value) divElem.innerHTML = mdMarked md.parentNode.replaceChild(divElem, md) } } </script> ```