htmlreactjssyntax-highlightingsyntaxhighlighterhighlight.js

how to use/implement input tags and custom jsx tag for syntax highlighting using Highlight.JS?

I was just searching around how to highlight code just like Text editors on website and I found some libraries and I liked highlight.js and started to play around with it.

But to my sense it worked well except for the <input/>tags and custom react component tags doesn't get rendered well.

I followed the documentation and implement the code in following manner:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/night-owl.min.css">

<div class="code-container" style="margin: auto; width: 50%;">
    <pre><code data-language="html">
        import React, { Component } from 'react'
        import './reg-style/Credentail.css'
        import 'react-phone-number-input/style.css'
        import PhoneInput from 'react-phone-number-input'
        export class Credential extends Component {
    continue = e => {
        e.preventDefault();
        this.props.nextStep();
      };

      back = e => {
        e.preventDefault();
        this.props.prevStep();
      };
    render() {
          const { values, handleChange } = this.props;

        return (
            <pre>
                <code data-language="html">
                    <div>
                        <Helmet>
                        <body className="form-bg-col"></body>
                      </Helmet>


                      <div className="login">
                        <div className="reg-container">
                        <button onClick={this.back} className="col-form-prev"><i class="fa fa-chevron-left"></i></button>
                        <div className="user-detail email">
                            Email:
                            <input onChange={handleChange('Email')} defaultValue={values.Email}  type="email" placeholder="Enter your Email"/>
                        </div>
                        <div  className="user-detail ">
                            Phone:
                            <PhoneInput
                            onChange={handleChange('Phone')} defaultValue={values.Phone}
                            displayInitialValueAsLocalNumber
                              placeholder="Enter phone number"
                              defaultCountry="IN"
                              />

                        </div>
                        <div className="user-detail username">
                            Username:
                            <code><input onChange={handleChange('Username')} defaultValue={values.Username} type="text" placeholder="Select your unique Username" /></code>
                        </div>
                        <div className="user-detail password">
                            Password:
                            <input onChange={handleChange('Password')} defaultValue={values.Password} type="password" placeholder="Choose your Password" />
                        </div>

                        <button onClick={this.continue} className="col-form-next"><i class="fa fa-chevron-right"></i></button>


                        </div>

                      </div>
                  </div>
                </code>

            </pre>
        )
    }
}

export default Credential

    </code></pre>

</div>

and result was as following:

enter image description here What should i do to rectify these issues?
Thanks...

Solution

  • All the HTML inside your pre/code block HTML needs to be properly escaped to avoid code injection.... This is just how HTML works.

    Bad (this is actual HTML and will be rendered by the browser):

    <pre><code>
<strong>Hey I'm HTML</strong>
</code></pre>

    Good (now it's just text [when rendered]):

    <pre><code>
&lt;strong&gt;Hey I'm HTML&lt;/strong&gt;
</code></pre>

    [Disclaim: I'm the current Highlight.js maintainer.]