如何在网站中像字符串一样显示html代码和javascript - How can i show html code and javascript like a string in website

How can i show html code and javascript like a string in website

我想在网页中像显示文本类型一样显示这些代码。我使用的程序语言是PHP

<div>
    <a href="js/index.html">Js</a></div>
    <div><a href="php/index.php">PHP</a></div>
    <div><a href="test/index.html">Test</a></div>
    <input id="in" type="text">
    <div class="">Off season <span id="out"></span> this</div>
    <script src="js/assets/jquery.js"></script>
    <script>
        $("#in").keyup(function () {
            var text = this.value;
            $('#out').text(text);
        })
    </script>
</div>

HTML转义

&lt;div&gt;
    &lt;a href=&quot;js/index.html&quot;&gt;Js&lt;/a&gt;&lt;/div&gt;
    &lt;div&gt;&lt;a href=&quot;php/index.php&quot;&gt;PHP&lt;/a&gt;&lt;/div&gt;
    &lt;div&gt;&lt;a href=&quot;test/index.html&quot;&gt;Test&lt;/a&gt;&lt;/div&gt;
    &lt;input id=&quot;in&quot; type=&quot;text&quot;&gt;
    &lt;div class=&quot;&quot;&gt;Off season &lt;span id=&quot;out&quot;&gt;&lt;/span&gt; this&lt;/div&gt;
    &lt;script src=&quot;js/assets/jquery.js&quot;&gt;&lt;/script&gt;
    &lt;pre&gt;
        $(&quot;#in&quot;).keyup(function () {
            var text = this.value;
            $(&#x27;#out&#x27;).text(text);
        })
    &lt;/pre&gt;
&lt;/div&gt;

有很多好的答案，但另一个可以使用的答案是：

highlight_string

<?php
$var = '<div>
    <a href="js/index.html">Js</a></div>
    <div><a href="php/index.php">PHP</a></div>
    <div><a href="test/index.html">Test</a></div>
    <input id="in" type="text">
    <div class="">Off season <span id="out"></span> this</div>
    <script src="js/assets/jquery.js"></script>
    <script>
        $("#in").keyup(function () {
            var text = this.value;
            $("#out").text(text);
        })
    </script>
</div>';
highlight_string($var);
?>

答案来自这里https://stackoverflow.com/a/28965609/2285345

除了我的评论：

<div>
    <a href="js/index.html">Js</a></div>
    <div><a href="php/index.php">PHP</a></div>
    <div><a href="test/index.html">Test</a></div>
    <input id="in" type="text">
    <div class="">Off season <span id="out"></span> this</div>
    <script src="js/assets/jquery.js"></script>
    <pre>
        $("#in").keyup(function () {
            var text = this.value;
            $('#out').text(text);
        })
    </pre>
</div>

您可以使用w3schools作为起点。

您应该将其包装在<pre>Your code goes here</pre>标记中。