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:
parent
68e85cc7b3
commit
9cdfdb699c
2 changed files with 35 additions and 79 deletions
|
@ -2,97 +2,37 @@
|
||||||
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'] || '–'
|
|
||||||
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>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if page.next %}
|
{% if page.next %}
|
||||||
<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
|
||||||
|
|
||||||
|
|
|
@ -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);
|
||||||
|
|
Loading…
Reference in a new issue