求助，如何才能让css代码以纯文本的方式展现在html页面内

Question

我有一段代码如下

<style>
    ul {
        list-style: none;
    }
</style>
<ul class='test'>
    <li class='word' data-repeat='1'>a</li>
    <li class='word' data-repeat='2'>b</li>
    <li class='word' data-repeat='3'>c</li>
</ul>

我希望上面的代码能以文本的形式放到页面上，

把这段代码放到html页面的时候，就好比把上面的代码放到了txt文件内，

请问如何才能实现？

用pre标签效果如下

Answer 1

方案一:

`pre`标签就好了
<pre>
    <code>ul</code>{
        <code>list-style: none;</code>
    }    
    
</pre>

方案二:

<p></p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("p").text("<style>\
    ul {\
        list-style: none;\
    }\
</style>\
<ul class='test'>\
    <li class='word' data-repeat='1'>a</li>\
    <li class='word' data-repeat='2'>b</li>\
    <li class='word' data-repeat='3'>c</li>\
</ul>")

Answer 2

<xmp>
  <style>
    ul {
      list-style: none;
    }
  </style>
  <ul class='test'>
    <li class='word' data-repeat='1'>a</li>
    <li class='word' data-repeat='2'>b</li>
    <li class='word' data-repeat='3'>c</li>
  </ul>
</xmp>

Answer 3

document.body.appendChild(
  document.createElement('pre')
).innerText = `<style>
    ul {
        list-style: none;
    }
</style>
<ul class='test'>
    <li class='word' data-repeat='1'>a</li>
    <li class='word' data-repeat='2'>b</li>
    <li class='word' data-repeat='3'>c</li>
</ul>`

Answer 4

我这么实现的

<pre>
    &lt;style&gt;
        ul {
            list-style: none;
        }
    &lt;/style&gt;

    &lt;ul class='test'&gt;
        &lt;li class='word' data-repeat='1'&gt;a&lt;/li&gt;
        &lt;li class='word' data-repeat='2'&gt;b&lt;/li&gt;
        &lt;li class='word' data-repeat='3'&gt;c&lt;/li&gt;
    &lt;/ul&gt;
    
</pre>