как использовать / реализовать теги ввода и пользовательский тег jsx для подсветки синтаксиса с помощью Highlight. JS? - PullRequest
Новая
       37

как использовать / реализовать теги ввода и пользовательский тег jsx для подсветки синтаксиса с помощью Highlight. JS?

0 голосов
/ 16 марта 2020

Я просто искал, как выделить код так же, как текстовые редакторы на веб-сайте, и я нашел несколько библиотек, и мне понравился highlight.js, и начал с ним играть.

Но, на мой взгляд, это сработало хорошо за исключением тегов <input/> и пользовательских тегов реагирования, они плохо отображаются.

Я следовал документации и внедрял код следующим образом : 

<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>
)}} Экспортировать учетные данные по умолчанию

и результат был следующим:

enter image description here Что я должен сделать, чтобы исправить эти проблемы?
Спасибо ...

...