brouilleursdeblanc/_posts/2013-08-16-code-highlighting-post.md

layout	title	description	category	tags	image	comments
post	Syntax Highlighting Post	Demo post displaying the various ways of highlighting code in Markdown.	articles	sample post code highlighting	feature credit creditlink so-simple-sample-image-5.jpg Michael Rose http://mademistakes.com	true

Syntax highlighting is a feature that displays source code, in different colors and fonts according to the category of terms. This feature facilitates writing in a structured language such as a programming language or a markup language as both structures and syntax errors are visually distinct. Highlighting does not affect the meaning of the text itself; it is intended only for human readers.¹

Pygments Code Blocks

{% highlight css %} #container { float: left; margin: 0 -240px 0 0; width: 100%; } {% endhighlight %}

{% highlight html %}

{% if page.previous %} Previous article {% endif %} {% if page.next %} Next article {% endif %} {% endhighlight %}

{% highlight ruby %} module Jekyll class TagIndex < Page def initialize(site, base, dir, tag) @site = site @base = base @dir = dir @name = 'index.html' self.process(@name) self.read_yaml(File.join(base, '_layouts'), 'tag_index.html') self.data['tag'] = tag tag_title_prefix = site.config['tag_title_prefix'] || 'Tagged: ' tag_title_suffix = site.config['tag_title_suffix'] || '–' self.data['title'] = "#{tag_title_prefix}#{tag}" self.data['description'] = "An archive of posts tagged #{tag}." end end end {% endhighlight %}

Standard Code Block

<nav class="pagination" role="navigation">
      <a href="/previous-article-page.html" class="btn" title="Previous Page Title Goes Here">Previous article</a>
      <a href="/next-article-page.html" class="btn" title="Next Page Title Goes Here">Next article</a>
</nav><!-- /.pagination -->

Fenced Code Blocks

#container {
    float: left;
    margin: 0 -240px 0 0;
    width: 100%;
}

<nav class="pagination" role="navigation">
    {% if page.previous %}
        <a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
    {% endif %}
    {% if page.next %}
        <a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
    {% endif %}
</nav><!-- /.pagination -->

module Jekyll
  class TagIndex < Page
    def initialize(site, base, dir, tag)
      @site = site
      @base = base
      @dir = dir
      @name = 'index.html'
      self.process(@name)
      self.read_yaml(File.join(base, '_layouts'), 'tag_index.html')
      self.data['tag'] = tag
      tag_title_prefix = site.config['tag_title_prefix'] || 'Tagged: '
      tag_title_suffix = site.config['tag_title_suffix'] || '&#8211;'
      self.data['title'] = "#{tag_title_prefix}#{tag}"
      self.data['description'] = "An archive of posts tagged #{tag}."
    end
  end
end

---

1. http://en.wikipedia.org/wiki/Syntax_highlighting ↩︎