Get GFM fenced code blocks working

- For simplicity remove other styles of code block examples and stick with what GitHub uses
This commit is contained in:
Michael Rose 2016-02-23 12:11:13 -05:00
parent 68e85cc7b3
commit 9cdfdb699c
2 changed files with 35 additions and 79 deletions

View file

@ -2,86 +2,26 @@
title: Syntax Highlighting Post title: Syntax Highlighting Post
excerpt: "Demo post displaying the various ways of highlighting code in Markdown." excerpt: "Demo post displaying the various ways of highlighting code in Markdown."
tags: [sample post, code, highlighting] tags: [sample post, code, highlighting]
modified: 2016-02-01 modified: 2016-02-23T12:08:33-05: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] 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> [^1]: <http://en.wikipedia.org/wiki/Syntax_highlighting>
### Highlighted Code Blocks ### GFM Code Blocks
To modify styling and highlight colors edit `/_sass/syntax.scss`. 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`.
{% highlight css %} ```css
#container { #container {
float: left; float: left;
margin: 0 -240px 0 0; margin: 0 -240px 0 0;
width: 100%; width: 100%;
} }
{% endhighlight %} ```
{% highlight html %} ```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'] || '&#8211;'
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](http://jekyllrb.com/docs/configuration/) for more information.
~~~ css
#container {
float: left;
margin: 0 -240px 0 0;
width: 100%;
}
~~~
~~~ html
{% raw %}<nav class="pagination" role="navigation"> {% raw %}<nav class="pagination" role="navigation">
{% if page.previous %} {% if page.previous %}
<a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a> <a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
@ -90,9 +30,9 @@ To modify styling and highlight colors edit `/_sass/coderay.scss`. Line numbers
<a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a> <a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
{% endif %} {% endif %}
</nav><!-- /.pagination -->{% endraw %} </nav><!-- /.pagination -->{% endraw %}
~~~ ```
~~~ ruby ```ruby
module Jekyll module Jekyll
class TagIndex < Page class TagIndex < Page
def initialize(site, base, dir, tag) def initialize(site, base, dir, tag)
@ -110,7 +50,24 @@ module Jekyll
end end
end end
end end
~~~ ```
### 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.
### GitHub Gist Embed ### GitHub Gist Embed

View file

@ -153,7 +153,6 @@ li {
code { code {
@include font-rem(12); @include font-rem(12);
line-height: 1.5; line-height: 1.5;
white-space: nowrap;
margin: 0 2px; margin: 0 2px;
padding: 0 5px; padding: 0 5px;
border: 1px solid lighten($black, 90); border: 1px solid lighten($black, 90);