This page demontrates various ways code blocks can be structured in Markdown. It compares a backtick fenced codeblock, a liquid tag enclosed codeblock and an indented codeblock. Each section displays the raw Markdown, the HTML structure (from rendered page source at time of writing) and finally the rendered code block.

Table of Contents

Backtick Fenced Codeblock
Liquid Tag Enclosed Codeblock
Indented Code
Direct Comparison
Line Numbers
Inline Code

Backtick Fenced Codeblock

Markdown source

``` coffeescript
# Objects:
math =
  root:   Math.sqrt
  square: square
  cube:   (x) -> x * square x
```

HTML Structure

<div class="highlighter-rouge">
  <pre class="highlight">
    <code>
      <!-- Code -->
    </code>
  </pre>
</div>

Rendered output

# Objects:
math =
  root:   Math.sqrt
  square: square
  cube:   (x) -> x * square x

Liquid Tag Enclosed Codeblock

Markdown source

{% highlight coffeescript %}
# Objects:
math =
  root:   Math.sqrt
  square: square
  cube:   (x) -> x * square x
{% endhighlight %}

HTML Structure

<figure class="highlight">
  <pre>
    <code class="language-coffeescript" data-lang="coffeescript">
      <!-- Code -->
    </code>
  </pre>
</figure>

Rendered output

# Objects:
math =
  root:   Math.sqrt
  square: square
  cube:   (x) -> x * square x

Indented Code

Markdown source

    # Objects:
    math =
      root:   Math.sqrt
      square: square
      cube:   (x) -> x * square x

HTML Structure

<div class="highlighter-rouge">
  <pre class="highlight">
    <code>
      <!-- Code -->
    </code>
  </pre>
</div>

Rendered output

# Objects:
math =
  root:   Math.sqrt
  square: square
  cube:   (x) -> x * square x

Direct Comparison

And for good measure the three different types of code blocks in direct comparison. This makes it easier to verify the outcome of CSS syntax highlighting, etc.

Backtick fenced…

# Objects:
math =
  root:   Math.sqrt
  square: square
  cube:   (x) -> x * square x

Liquid tagged…

# Objects:
math =
  root:   Math.sqrt
  square: square
  cube:   (x) -> x * square x

Indented…

# Objects:
math =
  root:   Math.sqrt
  square: square
  cube:   (x) -> x * square x

Line Numbers

Markdown source

{% highlight coffeescript linenos %}
# Objects:
math =
  root:   Math.sqrt
  square: square
  cube:   (x) -> x * square x
{% endhighlight %}

HTML Structure

<figure class="highlight">
  <pre>
    <code class="language-coffeescript" data-lang="coffeescript">
      <table style="border-spacing: 0">
        <tbody>
          <tr>
            <td class="gutter gl" style="text-align: right">
              <pre class="lineno">
                <!-- Line Numbers -->
              </pre>
            </td>
            <td class="code">
              <pre>
                <!-- Code -->
              </pre>
            </td>
          </tr>
        </tbody>
      </table>
    </code>
  </pre>
</figure>

Rendered output

1
2
3
4
5
# Objects:
math =
  root:   Math.sqrt
  square: square
  cube:   (x) -> x * square x

Inline Code

Inline code is also possible. I am aware of backticks or html to do this.

Here is sample `inline code` within a sentence.

Here is sample inline code within a sentence.

Here is sample <code>inline code</code> within a sentence.

Here is sample inline code within a sentence.