Gatsby: [gatsby-remark-prism]: Hightlighting empty line hides it from source view and moves other lines up

[ethernal]

Description

Issue was automatically closed. Reopening as new one.

This issue is for gatsby-remark-prism plugin.

When highlighting empty line it disappears due to rendering of empty span.

ex. in case line 3 is empty and lines 3, 5 and 6 should be highlighted the code will produce almost expected results but the lines 5 and 6 will have numbers 4 and 5 and line 3 will be not visible.

Steps to reproduce

Tested in Firefox and Chrome.
CSS files are from documentation site.
Order did not matter.

gatsby-browser.js

require("prismjs/themes/prism-tomorrow.css")
require("prismjs/plugins/command-line/prism-command-line.css")
require("prismjs/plugins/line-numbers/prism-line-numbers.css")
require("./src/css/prism/line-highlight.css")
require("./src/css/prism/line-numbers.css")
require("./src/css/prism/command-prompt.css")

MDX file

set code options to: javascript {numberLines: true}{4,8,13}

import React from "react"
import Layout from "../components/layout/layout"
import SEO from "../components/seo"

const NotFoundPage = () => (
  <Layout>
    <SEO title="404: Not found" />
    <h1>NOT FOUND</h1>
    <p>You just hit a route that doesn't exist... the sadness.</p>
  </Layout>
)

export default NotFoundPage

Mark empty line to highlight it or include empty line in highlight range.

Expected result

Empty line should be highlighted as removing/hiding it breaks the line numbering logic.

Actual result

Line disappears due to span being empty.

Solution

in directives.js in gatsby-remark-prism

change line:

highlightWrap(line.code)

to:

line.code
            ? (line.code = highlightWrap(line.code))
            : (line.code = highlightWrap(" "))

I will make a PR for this and link it here.

It might be that only I am affected as the issue is annoying and would have been reported already, I think.

Environment

Run gatsby info --clipboard in your project directory and paste the output here.

System:
OS: Windows 10
CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
Binaries:
Node: 12.1.0 - D:\software\nodejs\node.EXE
Yarn: 1.17.3 - D:\software\yarn\bin\yarn.CMD
npm: 6.9.0 - D:\software\nodejs\npm.CMD
Languages:
Python: 2.7.15 - /c/Users/xxxxxx/.windows-build-tools/python27/python
Browsers:
Edge: 42.17134.1.0
npmPackages:
gatsby: ^2.13.12 => 2.13.12
gatsby-image: ^2.2.4 => 2.2.4
gatsby-plugin-emotion: ^4.1.2 => 4.1.2
gatsby-plugin-manifest: ^2.2.1 => 2.2.1
gatsby-plugin-mdx: ^1.0.11 => 1.0.11
gatsby-plugin-offline: ^2.2.1 => 2.2.1
gatsby-plugin-react-helmet: ^3.1.0 => 3.1.0
gatsby-plugin-sharp: ^2.2.3 => 2.2.3
gatsby-plugin-typography: ^2.3.3 => 2.3.3
gatsby-remark-embed-snippet: ^4.1.2 => 4.1.2
gatsby-remark-emoji: ^0.0.3 => 0.0.3
gatsby-remark-images: ^3.1.3 => 3.1.3
gatsby-remark-prismjs: ^3.3.5 => 3.3.5
gatsby-source-filesystem: ^2.1.3 => 2.1.3
gatsby-transformer-remark: ^2.6.14 => 2.6.14
gatsby-transformer-sharp: ^2.2.1 => 2.2.1

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[ethernal]

It is not stale.

[wardpeet]

Hey @ethernal sorry for the late response.

To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Gatsby! 💜

[ethernal]

Here is the repo with code: https://github.com/ethernal/gatsby-remark-prism-example

I removed most data but left all other stuff. Please navigate to Blog->Hello World.

You will see the exact problem. After modifying react prism it will go away.

[JCMais]

same issue

[andrew-chang-dewitt]

So #18719 was closed because #21711 supposedly fixed this issue, but I'm still experiencing this bug.

I've updated gatsby & gatsby-prism-js (really all of my dependencies). Has #21711 not landed in a release yet, or is it possible that #18719 needs reopened?

_Edit: corrected reference to #18719_