所以,目前,我有一些不必要的冗长代码来以编程格式显示文本。这就是我所拥有的:
<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 < 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;
}
生成的表格是具有交替背景颜色的表格,以及沿侧面打印的数字。但是,我希望看到更简单的方法来做到这一点;这是一个简单的十行代码,最终可能变成一个非常耗时的问题。感谢任何帮助,谢谢!
答案 0 :(得分: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>