---
title: 'Syntax Highlighting Post'
url: 'https://demo.getgrav.org/hpstr-skeleton/blog/code-highlighting-post'
markdown: 'https://demo.getgrav.org/hpstr-skeleton/blog/code-highlighting-post.md'
date: '2013-08-16'
description: '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. Hig…'
taxonomy:
  tags:
    - 'sample post'
    - code
    - highlighting
---

# [Syntax Highlighting Post](https://demo.getgrav.org/hpstr-skeleton/blog/code-highlighting-post "Syntax Highlighting Post")

## August 16, 2013

  Reading time ~2 minutes

[Syntax highlighting](http://en.wikipedia.org/wiki/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`.

```css
#container {
    float: left;
    margin: 0 -240px 0 0;
    width: 100%;
}
```

Line numbering enabled:

```

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

```

```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'] || '&#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 -->

```

### 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`.

```css
#container {
    float: left;
    margin: 0 -240px 0 0;
    width: 100%;
}
```

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

```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'] || '&#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.

<script src="https://gist.github.com/mmistakes/6589546.js"></script>

<script src="https://gist.github.com/8531391.js"></script>

  [sample post](https://demo.getgrav.org/hpstr-skeleton//tags:sample%20post "Pages tagged sample post") [code](https://demo.getgrav.org/hpstr-skeleton//tags:code "Pages tagged code") [highlighting](https://demo.getgrav.org/hpstr-skeleton//tags:highlighting "Pages tagged highlighting")  [Syntax Highlighting Post](https://demo.getgrav.org/hpstr-skeleton/blog/code-highlighting-post "Syntax Highlighting Post") was published on August 16, 2013 (revised: 12/05/2014) [Joe Bloggs](https://demo.getgrav.org/about "About Joe Bloggs")- [ Like](https://www.facebook.com/sharer/sharer.php?u=https://demo.getgrav.org/hpstr-skeleton/blog/code-highlighting-post "Share on Facebook")
- [ Tweet](https://twitter.com/intent/tweet?text=https://demo.getgrav.org/hpstr-skeleton/blog/code-highlighting-post "Share on Twitter")
- [ +1](https://plus.google.com/share?url=https://demo.getgrav.org/hpstr-skeleton/blog/code-highlighting-post "Share on Google Plus")

   [comments powered by Disqus](http://disqus.com) [Read More](https://demo.getgrav.org/hpstr-skeleton/blog/background-image) 

### [Sample Post](https://demo.getgrav.org/hpstr-skeleton/blog/sample-post "Sample Post")

Just about everything you'll need to style in the theme: headings, paragraphs, blockquotes, tables, code blocks, and more. [Continue reading](https://demo.getgrav.org/hpstr-skeleton/blog/sample-post)

#### [Post with a Background Image](https://demo.getgrav.org/hpstr-skeleton/blog/background-image "Post with a Background Image")

 Published on October 27, 2013 

#### [Sample Link Post](https://demo.getgrav.org/hpstr-skeleton/blog/sample-link-post "Sample Link Post")

 Published on August 12, 2013

---

## Navigation

- Parent: [Latest Posts](https://demo.getgrav.org/hpstr-skeleton/index.md)
- Previous: [Post with a Background Image](https://demo.getgrav.org/hpstr-skeleton/blog/background-image.md)
- Next: [Sample Link Post](https://demo.getgrav.org/hpstr-skeleton/blog/sample-link-post.md)