mirror of
https://github.com/adulau/brouilleursdeblanc.git
synced 2024-11-23 18:47:07 +00:00
e711f8b839
- Cleanup _config.yml - Move navigation and author info to data files - Convert .less stylesheets to .scss - Update documentation - Include Octopress gem for new post/page creation
120 lines
No EOL
4 KiB
Markdown
120 lines
No EOL
4 KiB
Markdown
---
|
|
layout: post
|
|
title: Syntax Highlighting Post
|
|
excerpt: "Demo post displaying the various ways of highlighting code in Markdown."
|
|
categories: articles
|
|
tags: [sample-post, code, highlighting]
|
|
image:
|
|
feature: so-simple-sample-image-5.jpg
|
|
credit: Michael Rose
|
|
creditlink: http://mademistakes.com
|
|
comments: true
|
|
share: 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]
|
|
|
|
[^1]: <http://en.wikipedia.org/wiki/Syntax_highlighting>
|
|
|
|
### 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`.
|
|
|
|
{% highlight css %}
|
|
#container {
|
|
float: left;
|
|
margin: 0 -240px 0 0;
|
|
width: 100%;
|
|
}
|
|
{% endhighlight %}
|
|
|
|
{% highlight html %}
|
|
{% 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 %}
|
|
{% 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 `/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
|
|
{% 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 %}
|
|
~~~
|
|
|
|
~~~ 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
|
|
~~~ |