site/_posts-sample/2013-08-16-code-highlighting-post.md

---

layout: post title: Syntax Highlighting Post excerpt: "Demo post displaying the various ways of highlighting code in Markdown." tags: [sample post, code, highlighting] modified: 2014-09-14

comments: 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.^1

Pygments Code Blocks

To modify styling and highlight colors edit /_sass/_pygments.scss.

{% highlight css %} #container {

float: left;
margin: 0 -240px 0 0;
width: 100%;

} {% endhighlight %}

{% highlight html %} {% raw %}

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

{% 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 /_sass/_coderay.scss. Line numbers and a few other things can be modified in _config.yml. Consult Jekyll's documentation for more information.

#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

GitHub Gist Embed

An example of a Gist embed below.

{% gist mmistakes/6589546 %}