Skip to content

Pre And Code Tags In Github Markdown

by arlo on November 7th, 2011 

Not sure if there is some hidden resource somewhere on their site or blog, but I couldn’t find how to get syntax highlighting with <pre> and <code> tags. Here is what I found out.

Pre and Code Tags In Github

Not sure when/where I found that you could use <pre> and <code> tags, but I liked the idea. The only problem was syntax highlighting, but recently I decided to inspect their markup to see how they convert they fenced option into HTML. In doing so, I found out what attributes you need.

<pre lang="javascript"><code>
if(foo==true)
  alert('yes sir');
else
  alert('boo scenario');
</code></pre>

This method is my favored one thus far. Not buggy and you know what to expect. Here is an example of a huge block of C# code that ONLY worked with these <pre> and <code> tags, all documented methods bugged out.

Documented Markdown For Code

There are 2 documented ways to do code blocks in Github’s markdown.

1.) 4 Space Indent

In my case, this is awkward. Especially when pasting in a block of code.

    if(foo==true)
      alert('yes sir');
    else
      alert('boo scenario');

2.) Fenced code block with `

This is the format I’ve used the most, seems easier than the 4 space indent. You need to start with 3 ```language and end the fence with another 3 ```. This method has proven to be buggy.

```javascript
if(foo==true)
  alert('yes sir');
else
  alert('boo scenario');
```

From → github

  • Jotorres1

    Although I have not used git as much as you, but this seems very informative.  I will have to look into this, as I see that more companies now a days are using it for their big projects.

    Thanks for the post Arlo!

  • http://www.arlocarreon.com Arlo Carreon

    No problem!  This is more relative to github.com and pasting code into comments and issues on github.com.

    But you bring up a good point and I think I could probably blog about some more git topics. What would you like to see to help you get started?