Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

PrismJS doesn't detect/highlight properly JSX

See original GitHub issue

Information

Language: [JavaScript-React]
Plugins (configs):

"plugins": [
          [
            "prismjs",
            {
              "languages": [
                "jsx",
                "css",
                "html"
              ],
              "plugins": [
                "show-language",
                "keep-markup"
              ],
              "theme": "okaidia",
              "css": true
            }
          ],
          [
            "styled-components",
            {
              "ssr": true,
              "displayName": true
            }
          ]
        ]

Does the problem still occur in the latest version of Prism? You can check using the test page or get the latest version at the download page. Yes

Description The JSX markup is not working.

Code snippet

The code being highlighted incorrectly (doesn't detect JSX).

    "languages": [
                // I have also tried adding/removing "javascript" from this array
                "jsx",
                "css",
                "html"
              ],

Issue Analytics

State:
Created 4 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

ScottAgirscommented, Mar 21, 2020

Judging from the screenshot in #2260, it seems I’m correct.

ohh shocks!! what a goof! 😄 I tried changing back and forth in both - in languages, .babelrc, and in the element markup, but looks like I changed back the markup at one point, lol.

Thanks so much @RunDevelopment !!! this solved!

0reactions

RunDevelopmentcommented, Mar 21, 2020

Judging from the screenshot in #2260, it seems I’m correct.

Top Results From Across the Web

Prismjs not highlighting for React component - Stack Overflow

I tried your Editor component code and it worked for me. One thing I noticed is that you're not using the props.language object...

FAQ - Prism.js

Isn't it bad to do syntax highlighting with regular expressions? It is true that to correctly handle every possible case of syntax found...

Code samples with line highlighting · How to build

In this step-by-step guide I show how to build a React component ... (It doesn't help either that the library is called highlight.js...

How to use Prism.js correctly with Frontity - #28 by Divaksh

Code doesn't get highlighted on first visit to post from the home page. · Code gets highlighted if I go back to the...

prism-react-renderer - Best of JS

prism-react-renderer 🖌️. A lean Prism highlighter component for React Comes with everything to render Prismjs highlighted code directly to React (Native) ...