gatsbyjs / gatsby

The best React-based framework with performance, scalability and security built in.
https://www.gatsbyjs.com
MIT License
55.27k stars 10.31k forks source link

gatsby-remark-prismjs Is breaking when I define the language in the Markdown #10818

Closed konsalex closed 5 years ago

konsalex commented 5 years ago

Description

Hey there 🙌

I was trying to make a blog with Gatsby's blog starter kit.

I cloned the repo and started working on this.

I tried to work with Prism plugin 'gatsby-remark-prismjs' and something weird is happening.

When I write JS code like this in the markdown

```javascript
var s = 'Hello Folks';
alert(s);
/```

but it renders broken like the picture below.

alt text

Environment

System: OS: macOS 10.14.1 CPU: x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz Shell: 3.2.57 - /bin/bash Binaries: Node: 10.10.0 - /usr/local/bin/node Yarn: 1.12.3 - /usr/local/bin/yarn npm: 6.4.1 - /usr/local/bin/npm Browsers: Chrome: 71.0.3578.98 Firefox: 64.0 Safari: 12.0.1 npmPackages: gatsby: ^2.0.76 => 2.0.83 gatsby-image: ^2.0.22 => 2.0.25 gatsby-plugin-feed: ^2.0.8 => 2.0.11 gatsby-plugin-google-analytics: ^2.0.5 => 2.0.8 gatsby-plugin-manifest: ^2.0.5 => 2.0.13 gatsby-plugin-offline: ^2.0.5 => 2.0.20 gatsby-plugin-react-helmet: ^3.0.0 => 3.0.5 gatsby-plugin-sharp: ^2.0.6 => 2.0.17 gatsby-plugin-typography: ^2.2.0 => 2.2.4 gatsby-remark-copy-linked-files: ^2.0.5 => 2.0.8 gatsby-remark-images: ^2.0.4 => 2.0.6 gatsby-remark-prismjs: ^3.0.0 => 3.2.0 gatsby-remark-responsive-iframe: ^2.0.5 => 2.0.8 gatsby-remark-smartypants: ^2.0.5 => 2.0.7 gatsby-source-filesystem: ^2.0.2 => 2.0.12 gatsby-transformer-remark: ^2.1.6 => 2.1.19 gatsby-transformer-sharp: ^2.1.3 => 2.1.10 npmGlobalPackages: gatsby-cli: 1.1.58

DSchau commented 5 years ago

Hello!

Could you provide a reproduction? I just attempted to reproduce, and it worked as I'd expect!

screen shot 2019-01-03 at 2 00 58 pm
konsalex commented 5 years ago

Hey, @DSchau just uploaded a repo with all the code I run in my laptop.

Here is the link. Do you need anything more?

I have also uploaded a version here

DSchau commented 5 years ago

@konsalex you have a global style in src/styles.css that is changing the style of all spans.

span {
    display: block;
    text-align: center;
    white-space: pre;
}

screen shot 2019-01-03 at 4 29 30 pm

Removing or scoping that span (with a class/id/etc) will fix the issue like so:

screen shot 2019-01-03 at 4 29 57 pm

Closing as answered--please re-open if we can help further!