There is some conflicts using {% hightlight %} with minimal

[geekbanana]

• This is a question about using the theme.
• I believe this to be a bug with the theme --- not Jekyll, GitHub Pages or one of the bundled plugins.
• This is a feature request.
• I have updated all gems with bundle update.
• I have tested locally with bundle exec jekyll build.

---

Environment informations

• Minimal Mistakes version: 3.4.4
• github-pages or jekyll gem version: github-pages
• Operating system: ubuntu 16.04

---

Expected behavior

Expected code in {% highlight %} aligns left but aligns right .

Steps to reproduce the behavior

1. I have deleted layout: compress in my _layout/defaults.html
2. use ``` for code block is normal
3. use {% highlight %} for code block will make the code align right.

Here is the result page:
https://geekbanana.github.io/android/handler/creating-teminal/

Here is the code:

https://github.com/geekbanana/geekbanana.github.io/blob/master/_posts/android/handler/2016-09-09-creating-teminal.md

[mmistakes]

Strange, I'm not seeing any right alignment to the code blocks. They're all left aligned.

[geekbanana]

It's weird .
I just downloaded a new project of minimal-mastakes .

1. change _config.yml/url to http://localhost:4000
2. write a post _posts/2016-09-09-just-code.md

---
title: just-code
---

{% highlight java %}

public static Boolean valueOf(boolean b) {
    return b ? Boolean.TRUE : Boolean.FALSE;
}

{% endhighlight %}

3.copy defaults from your gh-pages
4.bundle install
5.bundle exec jekyll build , then the console report an error :

Liquid Exception: Liquid syntax error (line 1): 'highlight' tag was never closed in /home/new-github-blog/_posts/2016-09-09-just-code.md/#excerpt
Liquid Exception: Liquid syntax error (line 1): 'highlight' tag was never closed in index.html
jekyll 3.2.1 | Error: Liquid syntax error (line 1): 'highlight' tag was never closed

[mmistakes]

Could be due to the spaces.

{% highlight java %}
public static Boolean valueOf(boolean b) {
    return b ? Boolean.TRUE : Boolean.FALSE;
}
{% endhighlight %}

I stopped using Jekyll's {% highlight %} tag awhile ago once GFM backticks started working reliably with Kramdown and Jekyll.

[mmistakes]

If removing the spaces doesn't work it could also be due to how Jekyll deals with excerpts. If you don't define excerpt: in the YAML Front Matter then the theme falls back to Jekyll which autogenerates it from the first paragraph of content.

Entirely possible it has issues processing the {% highlight %} tag.

Since v1.0.0, Jekyll has had automatically-generated post excerpts. Since v1.1.0, Jekyll also passes these excerpts through Liquid, which can cause strange errors where references don’t exist or a tag hasn’t been closed. If you run into these errors, try setting excerpt_separator: "" in your _config.yml, or set it to some nonsense string.

• https://jekyllrb.com/docs/posts/#post-excerpts
• https://jekyllrb.com/docs/troubleshooting/#excerpts

[geekbanana]

It works for me to remove the spaces.

But the code block still align right. . .

[mmistakes]

Can you provide a screenshot? I've tested in a few browsers and I'm not seeing anything aligned to the right.

[geekbanana]

Oh, yeah , It is related to the browser.
I changed to Chromium , Then the code block works well.
But in Firfox , the code block will align right.
I'll privode the scrennshot and browser environment later.

[geekbanana]

Here is the FireFox screenshot:

Here is the chromium screenshot:

FireFox 48.0
Chromium Version 52.0.2743.116 Built on Ubuntu
OS: ubuntu 16.04

[mmistakes]

OK I see it now. For whatever reason Firefox doesn't stretch the <pre> element to fill it's parent container so it pushes to the right.

Adding .highlight pre { width: 100%; } to the style sheet fixes it.

I want to cleanup some other things related to line number styling so there will be a proper fix [#513] with those updates eventually.

[mmistakes]

Fixed. You can reference this commit 3c034e5 with the necessary SCSS to cleanup the alignment and make line numbers look better.

Example: