7142a54650
- Update to Jekyll v3.0 - Switch from Pygments.rb to Rouge for syntax highlighting - Minor updates to syntax.scss partial and theme documentation - Include jekyll-gist gem - Close #192, #218
3.8 KiB
layout, title, excerpt, tags, modified, comments
| layout | title | excerpt | tags | modified | comments | |||
|---|---|---|---|---|---|---|---|---|
| post | Syntax Highlighting Post | Demo post displaying the various ways of highlighting code in Markdown. |
|
2016-02-01 | 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
Highlighted Code Blocks
To modify styling and highlight colors edit /_sass/syntax.scss.
{% highlight css %} #container { float: left; margin: 0 -240px 0 0; width: 100%; } {% endhighlight %}
{% highlight html %} {% raw %}
{% if page.previous %} Previous article {% endif %} {% if page.next %} Next article {% endif %} {% 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 /_sass/coderay.scss. Line numbers and a few other things can be modified in _config.yml. Consult Jekyll's documentation for more information.
#container {
float: left;
margin: 0 -240px 0 0;
width: 100%;
}
{% 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 %}
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
GitHub Gist Embed
An example of a Gist embed below.
{% gist mmistakes/6589546 %}