2013-08-16 12:11:42 +00:00
---
layout: post
title: Syntax Highlighting Post
description: "Demo post displaying the various ways of highlighting code in Markdown."
category: articles
2014-07-29 01:15:41 +00:00
tags: [sample-post, code, highlighting]
2013-08-16 12:11:42 +00:00
image:
feature: so-simple-sample-image-5.jpg
credit: Michael Rose
creditlink: http://mademistakes.com
2014-01-02 16:55:49 +00:00
comments: true
share: true
2013-08-16 12:11:42 +00:00
---
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]
[^1]: < http: / / en . wikipedia . org / wiki / Syntax_highlighting >
### Pygments Code Blocks
2013-08-16 12:31:48 +00:00
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` .
2013-08-16 12:11:42 +00:00
{% highlight css %}
#container {
float: left;
margin: 0 -240px 0 0;
width: 100%;
}
{% endhighlight %}
{% highlight html %}
2013-08-16 12:31:48 +00:00
{% raw %}
2013-08-16 12:11:42 +00:00
< 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 -->
2013-08-16 12:31:48 +00:00
{% endraw %}
2013-08-16 12:11:42 +00:00
{% 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
2013-08-16 12:31:48 +00:00
{% raw %}
2013-08-16 12:11:42 +00:00
< nav class = "pagination" role = "navigation" >
2013-08-16 12:31:48 +00:00
{% 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 %}
2013-08-16 12:11:42 +00:00
< / nav > <!-- /.pagination -->
2013-08-16 12:31:48 +00:00
{% endraw %}
2013-08-16 12:11:42 +00:00
### Fenced Code Blocks
2013-08-16 12:31:48 +00:00
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` .
2013-08-16 12:11:42 +00:00
~~~ css
#container {
float: left;
margin: 0 -240px 0 0;
width: 100%;
}
~~~
~~~ html
2013-08-16 12:31:48 +00:00
{% raw %}< nav class = "pagination" role = "navigation" >
2013-08-16 12:11:42 +00:00
{% 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 %}
2013-08-16 12:31:48 +00:00
< / nav > <!-- /.pagination --> {% endraw %}
2013-08-16 12:11:42 +00:00
~~~
~~~ 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
~~~