html - 如何在网页上显示非 HTML 代码

Question

因此，目前，我有一些不必要的冗长代码来以编程格式显示文本。这是我得到的:

    <table id = "code">
        <tr>
            <td id = "comment">/// If-statement example</td>
        </tr>
        <tr><td></td></tr>
        <tr>
            <td>var x = 5;</td>
        </tr>
        <tr><td></td></tr>
        <tr>
            <td>if x &#60 3</td>
        </tr>
        <tr>
            <td>{</td>
        <tr>
        <tr>
            <td>    draw_text(100, 100, "x is less than 3!");</td>
        </tr>
        <tr>
            <td>    // Above is a function to "draw" text to the screen.  It takes an x coordinate, a y coordinate, and text to draw.  If it's not in double quotes, then it will print the value of that variable.</td>
        </tr>
        <tr>
            <td>}</td>
        </tr>
    </table>

使用 CSS:

#code
{
    text-align: left;
    font-family: "Times New Roman";
    font-size: 20px;
    position: float;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 75%;
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
    border-color: #333;
}

#comment
{
    color: #91DD8D;
}

tr:nth-child(even)
{
    background: #444
}

tr:nth-child(odd)
{
    background: #666
}

table 
{
    counter-reset: rowNumber;
    font-size: 16px;
}

table tr 
{
    counter-increment: rowNumber;
    color: #DDD;
}

table tr td:first-child::before 
{
    content: counter(rowNumber);
    color: #DDD;
    min-width: 1em;
    margin-right: 0.5em;
}

生成的表格具有交替的背景颜色，以及沿边打印的数字。但是，我希望看到一种更简单的方法来做到这一点；这是一个简单的十行代码，最终可能会变成一个非常耗时的问题。感谢您的帮助，谢谢!

Answer 1

您可以尝试使用像 php 这样的转义代码来为您解析所有 HTML。例如，您可以在后台设置一个 php 函数，该函数收集每行代码的数组，例如:

<?php $array_of_code_lines = explode(PHP_EOL, $code_string_variable); ?>

然后您可以使用一个简单的 foreach 循环以您想要的方式创建代码。

<table id = "code">
  <?php foreach($array_of_code_lines as $code_line) { ?>
    <tr>
      <td><?php echo $code_line; ?></td>
    </tr>
  <?php } ?>
</table>