时间戳

首页 > 解决方案 > 如何创建一个 html 文本编辑器来执行所有语法高亮？

html - 如何创建一个 html 文本编辑器来执行所有语法高亮？

问题描述

我正在寻找创建一个网站来编译您在文本编辑器中编写的 HTML 代码。这是我的代码：

<!DOCTYPE html>
<html>
<head><title>HTML editor</title></head>
<body>
<textarea id="textarea">
</textarea>
<iframe id="frame" srcdoc="This is where the code is interpreted. ">
</iframe>
<button  onclick="run();"></button>
<script>
function run() {
    var x = document.getElementById("textarea").value;
    var y = document.getElementById("frame");
    y.srcdoc = x;
}
</script>
</body>
</html>

现在写，我已经成功创建了一些可以编译 html 代码的东西。但我想做语法高亮。如何突出显示文本？

标签： htmliframetext-editor

解决方案

只需添加所需的CSS和JSfor Prism.js。

<!DOCTYPE html>
<html>
<head>
    ...
    <link href="https://myCDN.com/prism@v1.x/themes/prism.css" rel="stylesheet" />
</head>
<body>
    ...
    <script src="https://myCDN.com/prism@v1.x/components/prism-core.min.js"></script>
    <script src="https://myCDN.com/prism@v1.x/plugins/autoloader/prism-autoloader.min.js"></script>
</body>
</html>

然后添加下面HTML的元素

<pre><code class="language-css">p { color: red }</code></pre>

您在此元素中编写的任何代码都会突出显示语法。class="language-css"确定突出显示的语言，您可以根据需要更改。您可以在此处找到所有支持的语言。

注意：这是一个基本示例，您可以从这里开始并在prism.js 使用中找到更多信息

推荐阅读