javascript - 具有多种文本颜色的 Div

Question

拜托，我想知道它是如何工作的，就像 stackoverflow 一样。显示代码时，文本会以多种颜色显示，就像在文本编辑器应用中一样。

<form action="myForm.php" id="my_form" method="post">
    <input type="text" name="user_name"  id="user_name" />
    <input type="email" name="email" id="email" />
    <input type="password" id="password" name="password" />
    <input type="submit" name="submit" id="submit" />
</form>

我想知道它是如何完成的。它是添加到站点的应用程序还是只是编码。如果这是一个庞大的过程，请提供有关其工作原理的有用线索，但如果这是一个简短的过程，我需要更好的解释

这里，我只是把这个问题截图了，你就明白我的意思了

Answer 1

这是使用 javascript 完成的。我推荐这个https://highlightjs.org/在“使用”页面中有一个快速入门指南。

祝你好运。

---更新

这是一个简单的例子，如何使用它:

假设您已经在页面中添加了依赖文件，例如 highlighjs.min.js 和代码样式 css 文件，下面的代码应该可以完美运行。

代码块

<pre>
    <code class="html">
        <form action="myForm.php" id="my_form" method="post">
            <input type="text" name="user_name"  id="user_name" />
            <input type="email" name="email" id="email" />
            <input type="password" id="password" name="password" />
            <input type="submit" name="submit" id="submit" />
        </form>
    </code>
</pre>

Javascript 转义和高亮 block

$(document).ready(function () {

    $("pre code").each(function () {
        // Escape HTML code
        $(this).html($("<p/>").text($(this).html()).html());

        // Apply highlighting to the block
        hljs.highlightBlock(this);
    });

});

结果将是一个非常突出的代码!

JSFiddle:https://jsfiddle.net/evandroprogram/5sgrmsd4/