question-mark
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.

Highlight.js claims to support JSX, but you can tell by the screenshots below that JSX entered into react-syntax-highlighter does not get the correct coloring applied to the tags. Is this an issue with this library, or with Highlight.js itself?

screenshot from 2016-05-05 22-13-43

screenshot from 2016-05-05 22-15-42

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:15
  • Comments:25 (4 by maintainers)

github_iconTop GitHub Comments

6reactions
esr360commented, Jan 13, 2018
import SyntaxHighlighter from 'react-syntax-highlighter/prism';
import { xonokai } from 'react-syntax-highlighter/styles/prism';

<SyntaxHighlighter language='jsx' style={xonokai}>{
     '<Alert>This is an alert bar</Alert>'
}</SyntaxHighlighter>

Seems to work great 🎉

4reactions
wooormcommented, Aug 3, 2017

refractor may help! 😉

Read more comments on GitHub >

github_iconTop Results From Across the Web

Introducing JSX - React
It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI...
Read more >
Documentation - JSX - TypeScript
TypeScript supports embedding, type checking, and compiling JSX directly to JavaScript. Basic usage. In order to use JSX you must do two things....
Read more >
React JSX - W3Schools
What is JSX? ... JSX allows us to write HTML elements in JavaScript and place them in the DOM without ... React supports...
Read more >
JSX - Meta Open Source
JSX is an XML-like syntax extension to ECMAScript without any defined semantics. It's NOT intended to be implemented by engines or browsers.
Read more >
JSX (JavaScript) - Wikipedia
JSX is a React extension to the JavaScript language syntax which provides a way to structure component rendering using syntax familiar to many...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found