Gatsby: Prismjs + line numbers: Line numbers not aligned with code

[iangregsondev]

Description

PrismnJS: Line numbers in the gutter are not aligned with the code (on the X axis)

Steps to reproduce

Follow the instructions for setting up the gatsby prismjs plugin. The only thing I have done is in my gatsby-browser - i do

import "prismjs/themes/prism-okaidia.css"
import "prismjs/plugins/line-numbers/prism-line-numbers.css"

here is the part of my config

 {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-prismjs`,
            options: {
              classPrefix: "language-",
              inlineCodeMarker: null,
              aliases: {},
              showLineNumbers: true,
              noInlineHighlight: false
            }
          }
        ]
      }
    }

This is the markup that i am using

https://ibb.co/ibpXM9

Expected result

The line numbers should be aligned with the line they represent

Actual result

They are misaligned, see this https://ibb.co/bPkTuU

Environment

System:
OS: macOS 10.14
CPU: x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
Shell: 5.3 - /bin/zsh
Binaries:
Node: 10.8.0 - ~/.nvm/versions/node/v10.8.0/bin/node
Yarn: 1.6.0 - /usr/local/bin/yarn
npm: 6.2.0 - ~/.nvm/versions/node/v10.8.0/bin/npm
Browsers:
Chrome: 69.0.3497.100
Firefox: 62.0.3
Safari: 12.0
npmPackages:
gatsby: ^2.0.19 => 2.0.21
gatsby-image: ^2.0.13 => 2.0.13
gatsby-plugin-google-analytics: ^2.0.6 => 2.0.6
gatsby-plugin-google-fonts: ^0.0.4 => 0.0.4
gatsby-plugin-manifest: ^2.0.5 => 2.0.5
gatsby-plugin-offline: ^2.0.5 => 2.0.6
gatsby-plugin-react-helmet: ^3.0.0 => 3.0.0
gatsby-plugin-sharp: ^2.0.6 => 2.0.6
gatsby-plugin-styled-components: ^3.0.0 => 3.0.0
gatsby-plugin-typescript: ^2.0.0 => 2.0.0
gatsby-remark-prismjs: ^3.0.2 => 3.0.2
gatsby-source-contentful: ^2.0.3 => 2.0.3
gatsby-source-filesystem: ^2.0.3 => 2.0.3
gatsby-transformer-remark: ^2.1.7 => 2.1.7
gatsby-transformer-sharp: ^2.1.3 => 2.1.3
npmGlobalPackages:
gatsby-cli: 2.4.3
gatsby: 1.9.277

[pieh]

@phacks any clues about that?

It seems like some styling miss-alignment, but I don't have any context on that :/

[DSchau]

@appsolutegeek if you try downgrading to e.g. [email protected] does that solve the issue?

[iangregsondev]

Hi, @DSchau

I just installed the recommended versions (beta) and i ran gatsby develop - same issue.

[DSchau]

@appsolutegeek that's actually "good," it's not something we introduced recently then. Thanks for confirming! I can take a look at this in a bit!

[iangregsondev]

Great!, Thanks.. If you need me to test anything, just shout.

Or if you need me to provide more info.

[phacks]

@appsolutegeek Hi! I can have a look at this by tomorrow, I’ll keep you informed 😊

[phacks]

@appsolutegeek I was able to reproduce the problem by omitting to include the additional CSS used for line highlighting.

Could you please try to add the following (taken from the gatsby-remark-prismjs docs) to your layout.css ?

/**
 * Add back the container background-color, border-radius, padding, margin
 * and overflow that we removed from <pre>.
 */
.gatsby-highlight {
  background-color: #fdf6e3;
  border-radius: 0.3em;
  margin: 0.5em 0;
  padding: 1em;
  overflow: auto;
}

/**
 * Remove the default PrismJS theme background-color, border-radius, margin,
 * padding and overflow.
 * 1. Make the element just wide enough to fit its content.
 * 2. Always fill the visible space in .gatsby-highlight.
 * 3. Adjust the position of the line numbers
 */
.gatsby-highlight pre[class*="language-"] {
  background-color: transparent;
  margin: 0;
  padding: 0;
  overflow: initial;
  float: left; /* 1 */
  min-width: 100%; /* 2 */
}

.gatsby-highlight pre[class*="language-"].line-numbers {
  padding-left: 2.8em; /* 3 */
}

and see if it fixes the misaligned line numbers?

[iangregsondev]

Great! That worked. I placed all the CSS in my project and the line numbers were aligned BUT of course, it overrode my theme colours. So, I placed the background-color as 00000 (black) which matches the theme I imported.

So - thanks it does work!

Is this a workaround that we need to always have or is it something that will be fixed in an upcoming version?

Thanks in advance

[phacks]

@appsolutegeek From my own testing, it looks like most (not all) of the additional CSS is currently required to have a proper layout when enabling line numbering — even when line highlighting is not used.

I see two options: I could update the docs to reflect this, or try and build a minimal CSS setup that would work for line numberings only and add it to the docs.

@pieh @DSchau any thoughts about this?

[DSchau]

@phacks what are you thinking? It seems like it's documented, but clearly we can do more here.

I see two options: I could update the docs to reflect this

or try and build a minimal CSS setup that would work for line numberings only and add it to the docs.

I think we should do both :) Would be helpful to have more focused line-number styles that work outside of other styles, and then document that approach!

[iangregsondev]

My 2 cents here, when I applied the fix, all worked well but it overrode the background-color which i assumed came from the valid theme i imported .. I did remove the background-color completely but this didn't seem to work. The only thing I could do was apply the background-color back to the original that came from the theme.

It's not a problem, i know about it - but would be nice if it didn't override the background-color from the theme.

[phacks]

@appsolutegeek @DSchau Gave it a go with #9368! Any thoughts? 😊(please note that it does not address the background-color problem, only the initial bug)

[phacks]

The docs enhancement on #9368 have been merged, so I’m closing the issue 🙂