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

layout	title	excerpt	categories	tags	image	comments	share
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	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

To modify styling and highlight colors edit /assets/less/pygments.less and compile main.less with your favorite preprocessor. Or edit main.css if that's your thing, the classes you want to modify all begin with .highlight.

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

{% highlight html %} {% raw %}

{% if page.previous %} Previous article {% endif %} {% if page.next %} Next article {% endif %} {% endraw %} {% 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

{% raw %}
<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 -->
{% endraw %}

Fenced Code Blocks

To modify styling and highlight colors edit /assets/less/coderay.less and compile main.less with your favorite preprocessor. Or edit main.css if that's your thing, the classes you want to modify all begin with .coderay. Line numbers and a few other things can be modified in _config.yml under coderay.

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

{% raw %}<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 -->{% endraw %}

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 ↩︎