Different syntax highlighting on GitHub Pages and locaklly

Help
1

Hi all.

The markup generated for highlighted syntax is different on my local build and my website running on Github Pages. I’m not very Ruby person, Jekyll is the only piece of software that I use Ruby for. I updated my local githug-pages gem to the latest version to make sure that all the dependencies are running on the same version.

This is a source code to my website:
https://github.com/pawelgrzybek/pawelgrzybek.github.io

Issue is clearly presented on this screenshot:

50
Screen Shot 2017-10-19 at 11.02.50.jpg2560×1600 564 KB

Any idea what may cause these differences? Thanks in advance.

1 Like
2

Doesn’t look like you have a Gemfile so it’s entirely possible some of the gems you’re locally using are different versions from GitHub Pages. If you use a Gemfile as instructed here and run Jekyll with bundle exec jekyll serve you should replicate GitHub Pages environment exactly.

Specifically Rouge, which does the syntax highlighting was updated recently so that could explain the difference in markup.

3

I keep the versions of all the gh-pages dependencies in sync by updating a gem. I run exactly the same versions of all the component. Inconsistency still occurs.

4

When was the last time GitHub Pages built your site? If it’s been a bit, entirely possible what you’re seeing there is using older versions of Jekyll/Rouge which is why the syntax highlighted blocks have different markup.

I just cloned your repo, used the GitHub Pages gem to build the site and I’m seeing markup like:

<div class="language-js highlighter-rouge">
  <pre class="highlight">
    <code>
        ...
    </code>
  </pre>
</div>
5

For what it’s worth, all of my GitHub Pages built repos all show code blocks like above. I’m thinking if you force a rebuild of your site you’ll see the newer markup that omits the extra <div class="highlight">.

6

Thanks a lot for your effort and help.
Just forced rebuild bu sending an empty commit git commit -m 'rebuild pages' --allow-empty.

Unfortunately with no result.

As suggested by one super helpful girl from Github stuff, I reported an issue. Time will show. Thanks again for your help.

7

Did some more digging and looking at some of Jekyll’s tests, it appears the extra <div class="highlight"></div> markup is part of Rouge 2.

I have some sites that use the latest version of Jekyll (not GitHub Pages gem) and that’s the sort of markup I get.

<div class="language-js highlighter-rouge">
  <div class="highlight">
    <pre class="highlight">
      <code>...</code>
    </pre>
  </div>
</div>

So for whatever reason Rouge 2 is being engaged for you when building locally, and on GitHub Pages it’s using Rouge 1… which makes sense since they haven’t updated yet.

What’s confusing is your Gemfile.lock specifies the older version of Rouge… so not really sure how it’s using 2.

8

Related…

9

Can’t than you enough for your help and support. I’m not a RUby developer and to be honest with you I installed bundler for a first time in my life yesterday. I need to figure it out why the dependency version is different than the one in my Gemfile. I’ll ask some pals at work for help.

Thank you again @mmistakes

10

I just encountered the same issue as @pawelgrzybek

github copy has the extra

<div class="highlight">

local copy is ok.

Never seen this before, just notice it today after pushing.

1 Like
11

Exactly the same thing with me:

https://irudnyts.github.io/Dortmund-real-estate-market-analysis-tree-based-methods/

Highlighting has an extra frame.

12

Ufff, so it is not a problem only for myself. I’m waiting for reply from Github dudes. I will keep you guys in the loop.

13

Hey!

GitHub Pages is now running Rouge 2.2.1, which includes this div. Using v165 or later of the github-pages gem should use this newer version. Definitely recommend a Gemfile. If not, run gem uninstall rouge and select the version that’s not 2.2.1.

14

Hi @parkr thanks for the info. How can we run gem uninstall rouge and select the version that is not 2.2.1 on github? I understand we can do this locally.

15

@pawelgrzybek looks like fixing the CSS is the fastest way. Took me about 1 hour of work.

Follow @mmistakes 's instruction to replicate GitHub’s environment and you will see that your local copy will also generate the extra DIV. Alter the CSS to suit your preferred outcome and move on.

16

As far as CSS changes, what I ended up doing is targeting pre.highlight instead of just .highlight to avoid doubling up on some styling that could be added to div.highlight and pre.highlight.

Of course this is completely dependent on how you’re styling code blocks, but looking at your screenshot above @pawelgrzybek, seems like you have a similar issue as I did… the newer version of Rouge with the duplicate .highlight doubles up the padding.

Using this should remove the extra padding around the border.

pre.highlight {
    margin-bottom: 1.6rem;
    padding: .8rem 1.2rem;
    background: #faf9f9;
    box-shadow: 0 0 0 1px #eee;
}
17

@parkr Do you know what the purpose for adding the extra <div class="highlight"> that now wraps <pre class="highlight"> is? Seems unnecessary to me.

Just curious as code blocks seemed to work just fine before its addition.

18

Looks like unnecessary to me too. But well…this is what the Rouge team was supposing to fix https://github.com/jneen/rouge/commit/ae350ca9386d940adc43d51db6f0d88dd2f58f62

1 Like
19

@mmistakes thanks! changing .highlight to pre.highlight did the trick.

20

Thank you all for help. bundle update did the trick to bump rouge version, and pre.highlight fixed styling issue. Thanks