2013-09-07 17:59:02 +02:00
---
2016-02-24 22:12:21 +01:00
title: "Markup: Syntax Highlighting"
excerpt: "Post displaying the various ways of highlighting code in Markdown."
tags:
- code
- syntax highlighting
2013-09-07 17:59:02 +02:00
---
2014-09-14 20:55:21 +02: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 >
2013-09-07 17:59:02 +02:00
2016-02-23 18:11:13 +01:00
### GFM Code Blocks
2013-09-07 17:59:02 +02:00
2016-02-23 18:11:13 +01:00
GitHub Flavored Markdown [fenced code blocks ](https://help.github.com/articles/creating-and-highlighting-code-blocks/ ) are supported. To modify styling and highlight colors edit `/_sass/syntax.scss` .
2013-09-07 17:59:02 +02:00
2016-02-23 18:11:13 +01:00
```css
2013-09-07 17:59:02 +02:00
#container {
2016-02-23 18:11:13 +01:00
float: left;
margin: 0 -240px 0 0;
width: 100%;
2013-09-07 17:59:02 +02:00
}
2016-02-23 18:11:13 +01:00
```
2013-09-07 17:59:02 +02:00
2016-02-23 18:11:13 +01:00
```html
2013-09-07 17:59:02 +02:00
{% raw %}< nav class = "pagination" role = "navigation" >
2016-02-23 18:11:13 +01: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-09-07 17:59:02 +02:00
< / nav > <!-- /.pagination --> {% endraw %}
2016-02-23 18:11:13 +01:00
```
2013-09-07 17:59:02 +02:00
2016-02-23 18:11:13 +01:00
```ruby
2013-09-07 17:59:02 +02:00
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
2016-02-23 18:11:13 +01:00
```
### Code Blocks in Lists
Indentation matters. Be sure the indent of the code block aligns with the first non-space character after the list item marker (e.g., `1.` ). Usually this will mean indenting 3 spaces instead of 4.
1. Do step 1.
2. Now do this:
```ruby
def print_hi(name)
puts "Hi, #{name}"
end
print_hi('Tom')
#=> prints 'Hi, Tom' to STDOUT.
```
3. Now you can do this.
2014-04-15 21:42:38 +02:00
### GitHub Gist Embed
An example of a Gist embed below.
2015-04-17 12:43:36 +02:00
{% gist mmistakes/6589546 %}