N-archive/hacks-guide-minimal-mistakes-theme
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix line number width in code blocks

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
_sass/minimal-mistakes/_syntax.scss
View file

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

35
docs/_posts/2013-08-16-markup-syntax-highlighting.md
View file

@ -1,7 +1,7 @@
---
title: "Markup: Syntax Highlighting"
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:
teaser: "assets/images/markup-syntax-highlighting-teaser.jpg"
tags:
@ -47,17 +47,6 @@ GitHub Flavored Markdown [fenced code blocks](https://help.github.com/articles/c
</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
module Jekyll
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.
### 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
An example of a Gist embed below.

35
test/_posts/2013-08-16-markup-syntax-highlighting.md
View file

@ -1,7 +1,7 @@
---
title: "Markup: Syntax Highlighting"
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:
teaser: "assets/images/markup-syntax-highlighting-teaser.jpg"
tags:
@ -47,17 +47,6 @@ GitHub Flavored Markdown [fenced code blocks](https://help.github.com/articles/c
</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
module Jekyll
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.
### 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
An example of a Gist embed below.