如何使用/实现输入标记和自定义jsx标记来使用Highlight.JS突出显示语法？
如何使用/实现输入标记和自定义jsx标记来使用Highlight.JS突出显示语法？
提问于 2020-03-16 16:02:47
我只是在搜索如何高亮显示代码，就像网站上的文本编辑器一样，我找到了一些库，我喜欢highlight.js，并开始玩它。
但在我看来，它工作得很好，除了<input/>标记和自定义的react组件标记不能很好地呈现。
我跟踪了文档和以下列方式实现代码
<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>结果如下：
我应如何纠正这些问题？
谢谢..。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-10-18 00:04:38
您的预/代码块HTML中的所有HTML都需要正确地转义以避免代码注入.这正是HTML的工作方式。
糟糕(这是实际的HTML，将由浏览器呈现)：
<pre><code>
<strong>Hey I'm HTML</strong>
</code></pre>很好(现在它只是呈现时的文本)：
<pre><code>
<strong>Hey I'm HTML</strong>
</code></pre>否认:我现在是Highlight.js的维护者。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60709307
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号