如何使用 Highlight.JS use/implement 输入标签和自定义 jsx 标签来突出显示语法？

Question

我只是在搜索如何像网站上的文本编辑器一样突出显示代码，我发现了一些库，我喜欢 highlight.js 并开始使用它。

但在我看来，除了 <input/> 标签和自定义反应组件标签没有得到很好的渲染外，它工作得很好。

我按照文档和 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>

结果如下：

我应该怎么做才能纠正这些问题？
谢谢...

Answer 1

pre/code 块 HTML 中的所有 HTML 都需要正确转义以避免代码注入....这就是 HTML 的工作原理。

不好（这是实际的 HTML，将由浏览器呈现）：

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

很好（现在它只是文本[渲染时]）：

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

[免责声明：我是当前的 Highlight.js 维护者。]

如何使用 Highlight.JS use/implement 输入标签和自定义 jsx 标签来突出显示语法？

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

html

syntax-highlighting

syntaxhighlighter

reactjs

highlight.js