Fix line number width in code blocks

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.
This commit is contained in:
Michael Rose 2018-01-03 09:45:21 -05:00
parent eafdd4efc4
commit 3c5e913aaf
3 changed files with 48 additions and 24 deletions

View file

@ -44,11 +44,13 @@ figure.highlight {
td { td {
padding: 5px; padding: 5px;
width: calc(100% - 1em);
border: 0; border: 0;
/* line numbers*/ /* line numbers*/
&.gutter { &.gutter {
padding-right: 1em; padding-right: 1em;
width: 1em;
color: rgba($muted-text-color, 0.5); color: rgba($muted-text-color, 0.5);
} }
} }

View file

@ -1,7 +1,7 @@
--- ---
title: "Markup: Syntax Highlighting" title: "Markup: Syntax Highlighting"
excerpt: "Post displaying the various ways of highlighting code in Markdown." excerpt: "Post displaying the various ways of highlighting code in Markdown."
last_modified_at: 2017-10-20T12:23:00-04:00 last_modified_at: 2018-01-03T09:44:58-05:00
header: header:
teaser: "assets/images/markup-syntax-highlighting-teaser.jpg" teaser: "assets/images/markup-syntax-highlighting-teaser.jpg"
tags: tags:
@ -47,17 +47,6 @@ GitHub Flavored Markdown [fenced code blocks](https://help.github.com/articles/c
</nav><!-- /.pagination -->{% endraw %} </nav><!-- /.pagination -->{% endraw %}
``` ```
{% highlight html linenos %}
{% 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 %}
```ruby ```ruby
module Jekyll module Jekyll
class TagIndex < Page class TagIndex < Page
@ -95,6 +84,28 @@ Indentation matters. Be sure the indent of the code block aligns with the first
3. Now you can do this. 3. Now you can do this.
### Jekyll Highlight Tag
An example of a code blocking using Jekyll's [`{% raw %}{% highlight %}{% endraw %}` tag](https://jekyllrb.com/docs/templates/#code-snippet-highlighting).
{% highlight html linenos %}
{% 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 wl linenos %}
Module[{},
Sqrt[2]
4
]
{% endhighlight %}
### GitHub Gist Embed ### GitHub Gist Embed
An example of a Gist embed below. An example of a Gist embed below.

View file

@ -1,7 +1,7 @@
--- ---
title: "Markup: Syntax Highlighting" title: "Markup: Syntax Highlighting"
excerpt: "Post displaying the various ways of highlighting code in Markdown." excerpt: "Post displaying the various ways of highlighting code in Markdown."
last_modified_at: 2017-10-20T12:23:00-04:00 last_modified_at: 2018-01-03T09:45:06-05:00
header: header:
teaser: "assets/images/markup-syntax-highlighting-teaser.jpg" teaser: "assets/images/markup-syntax-highlighting-teaser.jpg"
tags: tags:
@ -47,17 +47,6 @@ GitHub Flavored Markdown [fenced code blocks](https://help.github.com/articles/c
</nav><!-- /.pagination -->{% endraw %} </nav><!-- /.pagination -->{% endraw %}
``` ```
{% highlight html linenos %}
{% 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 %}
```ruby ```ruby
module Jekyll module Jekyll
class TagIndex < Page class TagIndex < Page
@ -95,6 +84,28 @@ Indentation matters. Be sure the indent of the code block aligns with the first
3. Now you can do this. 3. Now you can do this.
### Jekyll Highlight Tag
An example of a code blocking using Jekyll's [`{% raw %}{% highlight %}{% endraw %}` tag](https://jekyllrb.com/docs/templates/#code-snippet-highlighting).
{% highlight html linenos %}
{% 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 wl linenos %}
Module[{},
Sqrt[2]
4
]
{% endhighlight %}
### GitHub Gist Embed ### GitHub Gist Embed
An example of a Gist embed below. An example of a Gist embed below.