3c5e913aaf
Code blocks with short line widths can cause `td.gutter` width to stretch, adding in undesired white space. Declaring widths on the table's columns fixes #1437 Add `{% highlight linenos %}` examples to test and demo sites.
3.4 KiB
| title | excerpt | last_modified_at | header | tags | toc | ||||
|---|---|---|---|---|---|---|---|---|---|
| Markup: Syntax Highlighting | Post displaying the various ways of highlighting code in Markdown. | 2018-01-03T09:45:06-05:00 |
|
|
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
GFM Code Blocks
GitHub Flavored Markdown fenced code blocks are supported. To modify styling and highlight colors edit /_sass/syntax.scss.
#container {
float: left;
margin: 0 -240px 0 0;
width: 100%;
}
{% highlight scss %} .highlight { margin: 0; padding: 1em; font-family: $monospace; font-size: $type-size-7; line-height: 1.8; } {% endhighlight %}
{% 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
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.
-
Do step 1.
-
Now do this:
def print_hi(name) puts "Hi, #{name}" end print_hi('Tom') #=> prints 'Hi, Tom' to STDOUT. -
Now you can do this.
Jekyll Highlight Tag
An example of a code blocking using Jekyll's {% raw %}{% highlight %}{% endraw %} tag.
{% highlight html linenos %} {% raw %}
{% if page.previous %} Previous article {% endif %} {% if page.next %} Next article {% endif %} {% endraw %} {% endhighlight %}{% highlight wl linenos %} Module[{}, Sqrt[2] 4 ] {% endhighlight %}
GitHub Gist Embed
An example of a Gist embed below.