New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
geekbanana opened this Issue Sep 9, 2016 · 10 comments

Comments

Projects
None yet
2 participants
@geekbanana

geekbanana commented Sep 9, 2016

  • 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

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Sep 9, 2016

Owner

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

screen shot 2016-09-08 at 9 28 22 pm

Owner

mmistakes commented Sep 9, 2016

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

screen shot 2016-09-08 at 9 28 22 pm

@geekbanana

This comment has been minimized.

Show comment
Hide comment
@geekbanana

geekbanana Sep 9, 2016

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

geekbanana commented Sep 9, 2016

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

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Sep 9, 2016

Owner

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.

Owner

mmistakes commented Sep 9, 2016

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

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Sep 9, 2016

Owner

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.

Owner

mmistakes commented Sep 9, 2016

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.

@geekbanana

This comment has been minimized.

Show comment
Hide comment
@geekbanana

geekbanana Sep 9, 2016

It works for me to remove the spaces.

But the code block still align right. . .

geekbanana commented Sep 9, 2016

It works for me to remove the spaces.

But the code block still align right. . .

@mmistakes

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Sep 9, 2016

Owner

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

Owner

mmistakes commented Sep 9, 2016

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

@geekbanana

This comment has been minimized.

Show comment
Hide comment
@geekbanana

geekbanana Sep 9, 2016

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 commented Sep 9, 2016

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

This comment has been minimized.

Show comment
Hide comment
@geekbanana

geekbanana Sep 9, 2016

Here is the FireFox screenshot:
firefox

Here is the chromium screenshot:
chromium

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

geekbanana commented Sep 9, 2016

Here is the FireFox screenshot:
firefox

Here is the chromium screenshot:
chromium

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

@mmistakes

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Sep 9, 2016

Owner

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.

Owner

mmistakes commented Sep 9, 2016

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 mmistakes self-assigned this Sep 9, 2016

@mmistakes mmistakes closed this in 3c034e5 Sep 9, 2016

mmistakes added a commit that referenced this issue Sep 9, 2016

Improve styling of `{% highlight %}` tag code blocks
- Fix alignment in issues in Firefox
- Remove table borders from `linenos`
- Harmonize padding and font-sizes
- Close #513 and close #512
@mmistakes

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Sep 9, 2016

Owner

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

Example:

highlight-code

Owner

mmistakes commented Sep 9, 2016

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

Example:

highlight-code

jluccisano added a commit to jluccisano/jluccisano.github.io that referenced this issue May 6, 2017

Improve styling of `{% highlight %}` tag code blocks
- Fix alignment in issues in Firefox
- Remove table borders from `linenos`
- Harmonize padding and font-sizes
- Close mmistakes#513 and close mmistakes#512

antonizoon pushed a commit to antonizoon/antonizoon.github.io that referenced this issue Jul 27, 2018

Improve styling of `{% highlight %}` tag code blocks
- Fix alignment in issues in Firefox
- Remove table borders from `linenos`
- Harmonize padding and font-sizes
- Close mmistakes#513 and close mmistakes#512
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment