How to embed literal <code> snippet within React/JSX component?

Question

I'm new to React, and I'm trying to render a static CSS code sample within a React component, like this:

React.createClass({
  render: function() {
    return (
      <code> body { color: blue; } </code>
    )
  }
});

However, this does not seem to work.

Is there some special way for me to escape code like this, or am I doing something wrong?

@ColonelThirtyTwo This does the trick, but I lose syntax highlighting for the portion in quotes. I don't suppose you are aware of an alternative in which syntax highlighting is preserved? — Austin York
– Austin York, Commented Apr 5, 2015 at 18:05
@AustinYork - As the suggestion is to put the content in a string literal, I'd be very surprised if any editor intentionally continued to syntax highlight the contents (as many devs wouldn't want that normally). — WiredPrairie
– WiredPrairie, Commented Apr 5, 2015 at 18:10
In WebStorm you can Alt-Enter -> Inject Language and choose the language for the string if you like. But it's not something most editors support. It's not code, it's a text string that happens to include code. — Brigand
– Brigand, Commented Apr 5, 2015 at 19:15

lukejacksonn · Accepted Answer · 2017-10-09 15:23:35Z

9

It is probably also worth noting that this can be done with multiline strings too:

<code>{`
  html { background: red; }
  body { color: blue; }
`}</code>

answered Oct 9, 2017 at 15:23

lukejacksonn

5056 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Thats nice, because it's easy to pass parameters if needed, using ${myparam}

This works. Thanks for that! I needed to wrap this with <pre> tag to preserve the next line and original formatting.

Austin York · Accepted Answer · 2015-04-06 04:06:53Z

7

@ColonelThirtyTwo's answer does the trick:

<code>{"body { color: blue; }"}</code>

answered Apr 6, 2015 at 4:06

Austin York

8482 gold badges10 silver badges25 bronze badges

jbailey · Accepted Answer · 2019-11-25 21:10:26Z

0

If you want to do multiline you have to add line breaks as follows. If you don't they will all be on the same line.

    <code>
      {`html { background: red; }`}<br/>
      {`body { color: blue; }`}<br/>
    </code>

answered Nov 25, 2019 at 21:10

jbailey

3274 silver badges6 bronze badges