Analytics Services

Home Projects AboutRSS

Syntax Highlighting Post

  • sample
  • post,
  • code,
  • highlighting

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

Highlighted Code Blocks

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

#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

Standard Code Block

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

GitHub Gist Embed

An example of a Gist embed below.

{% capture the_collection %}{{ page.collection }}{% endcapture %}
{% if page.collection %}
{% assign document = site[the_collection] %}
{% endif %}
{% for links in document %}
{% if links.title == page.title %}
{% unless forloop.first %}
{% assign prevurl = prev.url %}
{% assign prevtitle = prev.title %}
{% endunless %}
{% unless forloop.last %}
{% assign next = document[forloop.index] %}
{% assign nexttitle = next.title %}
{% assign nexturl = next.url %}
{% endunless %}
{% endif %}
{% assign prev = links %}
{% endfor %}
{% if prevurl %}<a href="{{ prevurl }}">Previous: {{ prevtitle l}}</a>{% endif %}<br />
{% if nexturl %}<a href="{{ nexturl }}">Next: {{ nexttitle }}</a>{% endif %}
<script>
/* post pagination keyboard shortcuts */
document.body.onkeyup = function(e){
if (e.keyCode == '37') { window.location = '{{ prevurl }}'; } // left arrow key
if (e.keyCode == '39') { window.location = '{{ nexturl }}'; } // right arrow key
};
</script>
view raw jekyll-collections-prev-next.html hosted with ❤ by GitHub

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