我如何在網站中像字符串一樣顯示html代碼和javascript

Question

我想將此代碼顯示為網頁中的文本類型。 我正在使用的程序語言是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>

Answer 1

HTML轉義

<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>

Answer 2

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

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

Answer 3

除了我的評論：

<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作為起點。

Answer 4

您應該將其包裝在<pre>Your code goes here</pre>標簽中。