Skip to content
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
2 of 5 tasks
geekbanana opened this issue Sep 9, 2016 · 10 comments
Closed
2 of 5 tasks

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

geekbanana opened this issue Sep 9, 2016 · 10 comments
Assignees

Comments

@geekbanana
Copy link

  • 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
Copy link
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

@geekbanana
Copy link
Author

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
Copy link
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.

@mmistakes
Copy link
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.

@geekbanana
Copy link
Author

It works for me to remove the spaces.

But the code block still align right. . .

@mmistakes
Copy link
Owner

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

@geekbanana
Copy link
Author

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
Copy link
Author

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
Copy link
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.

@mmistakes mmistakes self-assigned this Sep 9, 2016
mmistakes added a commit that referenced this issue Sep 9, 2016
- Fix alignment in issues in Firefox
- Remove table borders from `linenos`
- Harmonize padding and font-sizes
- Close #513 and close #512
@mmistakes
Copy link
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
- Fix alignment in issues in Firefox
- Remove table borders from `linenos`
- Harmonize padding and font-sizes
- Close mmistakes#513 and close mmistakes#512
makaroniame added a commit to makaroniame/makaroniame-old.github.io that referenced this issue May 18, 2022
- 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
Projects
None yet
Development

No branches or pull requests

2 participants