Line numbers in markdown syntax highlighting

#1

I am following this tutorial: http://www.alexpeattie.com/blog/github-style-syntax-highlighting-with-pygments/

And line numbering isn’t working properly with me. Furthermore, when I add the .highlight css tag, I get a yellow background in my code blocks, and so I removed it.

Any ideas how I can get line numbering to work? I pasted the CSS in my stylesheets/style.css. I tried with different browsers and it’s not working. It appears that syntax highlighting is not working properly. When creating a new blog post with:

def my_cool_method(message)
  puts message
end

It shows as follows:

def my_cool_method(message)
              puts message
            end

(wrong indentation and no colouring/highlighting). I’d appreciate

#2

I had this problem as well. As I was using HAML, I found it was messing with the whitespace, so you have to make sure to turn its “ugly” mode on.

In config.rb:

set :haml, :format => :html5, :ugly => true

If you are using something other than HAML, it may have similar settings to disable the (nice, but sometimes harmful) “pretty” indentation on HTML.

#3

Thanks, this fixes the white space and colours but not the numbering.

My HTML for the code block looks like this now:

<pre class="highlight ruby">
    <span class="k">def </span>
     <span class="nf">method</span>
    <span class="nb">puts</span>
    <span class="s2">"Hello World!"</span>
    <span class="k">end</span>
</pre>

When I look at the HTML of the blog post, I see the numbers are placed in a table before the the <span> tags in the <pre> tag.

For some reason, it is not placing a table with the numbers for me. So they do not show at all.

To get the numbers showing, I can change the pre a::before to pre span::before. However, the numbers each span. And each span corresponds to a different colouring mode not to a different line. So my code block looks like this:

1. def 2. method 3. puts 4. "hello world~" 5. end

This happens since I have the counter-increment and content set in pre span:before. So it will apply it before each span.

How can I differentiate lines? There is no differentiation. I am not sure why the CSS was pre a::before. I never have any hyperlinks in my code obviously. How can I get the numbers to be inserted in a table?

Note: I tried on the latest Firefox, Chrome and Safari on OS X and they all yield the same result.