How to show codes or HTML tags on HTML/PUG page

HTML/PUG

.codes

        p

          | The HTML 

        code button

        p

          |  tag defines a clickable button.

        p

          | The CSS 

        code background-color

        p

          |  property defines the background color of an element.

        br

     

        p

          | Hello worild in C++

        br

        code #include

        code <

        code iostream

        code >

        br

        code int main() {

        br

        span &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        code std::cout << "Hello World\n";

        br

        code }

        br

        p

          | Dark theme color code is #263859

          br

          | Website for dark theme colors code : https://colorhunt.co/palettes/dark

          br

CSS

.codes{

     background-color: #263859;

}

.codes p{

     color: lavenderblush;

}

.codes code{

     background-color: #232931;

     color: #ff8ba0;

}