How can I display custom snippet codes in the front end of my WordPress site

If you are using Gutenberg:

1. In your WordPress dashboard, click Posts or Pages.
2. Select Add New or hover over an existing post or page and select Edit.
3. Place your cursor where you want to display the code.
4. Click the Add Block icon (the plus sign) and search for “code”. Select the code block when it appears.

If you are using the Classic Editor

Display code snippets by using the preformatted text option.

1. Open the post where you want to include the code using the classic editor.
2. Enter your code in a text box
3. Highlight the code snippet and choose the preformatted text option from the dropdown.

Edit: Gutenberg Example:

<ul id=”mylist”>
  <li id=”list-item3″>text 3</li>
  <li id=”list-item4″>text 4</li>
  <li id=”list-item2″>text 2</li>
  <li id=”list-item1″>text 1</li>
</ul>

Screenshots showing results here: