Ask for help, how to make the css code appear in the html page in plain text

I have a code as follows

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

I hope the above code can be put on the page in the form of text,

when you put this code on the html page, it is like putting the above code in the txt file,

how can it be realized?

the effect of using pre tag is as follows

Nov.21,2021

Plan 1:

`pre`
    ul{
        list-style: none;
    }    
    

clipboard.png

:


clipboard.png


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


    <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>
    
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e48330-4d032.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e48330-4d032.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?