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

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