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.

Inserting characters

See original GitHub issue

I’m seeing unexpected output with JSX in a <pre><code data-trim class="jsx"> block

                    <pre><code data-trim class="jsx fragment">
return (
    <MyComponent
        style={{
            minHeight:350,
            color:'red',
            backgroundColor:'black',
            width:'36em',
            position:'relative',
        }}
    >
        <div
            style={{
                position: 'absolute',
                top: 16,
                left: 16,
            }}
        >
            Some stuffs.
        </div>
    </MyComponent>
)
                    </code></pre>

is outputting:

return (
  <mycomponent style="{{" minheight:350,="" color:'red',="" backgroundcolor:'black',="" width:'36em',="" position:'relative',="" }}="">
    <div style="{{" position:="" 'absolute',="" top:="" 16,="" left:="" }}="">
      Some stuffs.
    </div>
  </mycomponent>
)

The line breaks aren’t expected, neither are the equals and quotes, and the lowercasing is undesirable.

I’m using highlight in a reveal.js presentation. My config looks like:

{ src: 'plugin/highlight/highlight.js', async: true, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.configure({
  tabReplace: '  ', // 2 spaces
}); hljs.initHighlightingOnLoad(); } }

Have I missed a configuration setting somewhere?

Issue Analytics

State:
Created 8 years ago
Comments:5 (1 by maintainers)

Top GitHub Comments

1reaction

isagalaevcommented, Aug 8, 2015

I may be misunderstanding, but are you saying that without the changes Highlight is making, the code inside the <pre><code> block would be picked up as DOM elements by the browser?

Spot on! The <code> tag is not special in HTML, it doesn’t change the escaping rules and you can have arbitrary markup within it as with any other HTML tag. If you want your JSX snippet to be displayed literally (with or without highlighting) you should escape angle brackets with < and >.

(BTW, class="jsx" doesn’t mean anything to highlight.js as we don’t have a separate “jsx” language, instead we have JavaScript that does recognize JSX/E4X markup.)

0reactions

jayseegcommented, Aug 11, 2015

I see now. Can’t believe I got caught by such a basic concept! Thanks for taking the time to set me straight!