Line numbers in Ghost code markdown blocks

Question

I would like to know how to show line numbers in rendered markdown code blocks, and specifically how to do this for the Ghost blogging platform. Bonus if you can also have it color the code based on language (in a way similar to what GitHub and others do). Thanks!

Answer 1

This post mentions (Oct. 11, 2013):

I just realized Ghost is already supporting the GitHub-Markdown extension.

So basically you can just include as for example Google Code Prettify by adding the following line below {{! The main JavaScript file for Casper }} into:
/content/themes/casperdefault.hbs.

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

And use the following GitHub markdown in Ghost:

```prettyprint lang-ruby require 'redcarpet' markdown = Redcarpet.new("Hello World!") puts markdown.to_html ```

The Markdown above will produce the following HTML Code which then is prettified by Google Code Prettify:

<pre>
  <code class="prettyprint lang-ruby">
    require 'redcarpet' 
    markdown = Redcarpet.new("Hello World!") 
    puts markdown.to_html
  </code>
</pre> 

---

From there, you can read more at "google-code-prettify", which explains how to add line numbers:

You can use the linenums class to turn on line numbering.
If your code doesn't start at line number 1, you can add a colon and a line number to the end of that class as in linenums.

However, I haven't tested if that class would actually be in the attributes of the generated <code> element.

```prettyprint lang-ruby linenumber xxxx

Answer 2

I tried everything but nothing worked for me finally I added these lines at the bottom (suggested by google-code) and everything start working

<script>
    $(document).ready(function () {            
        $("pre").each(function () {
            if (($(this).html().split(/\n/).length - 1) > 3) {
                $(this).addClass('prettyprint linenums:1');
            }
        });
    });
 </script>

May be it can help anyone!