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转义并突出显示块

$(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/

Answer 2

    <div class="container">
       <span style="background-color:red">this span is red</span>
       <span style="background-color:green">this span is green</span>
       <span style="background-color:blue">this span is blue</span>
    </div>

您可以稍后设置div的高度和宽度属性，也可以使用渐变效果使其更具吸引力。