{"id":75382,"date":"2023-07-28T15:30:00","date_gmt":"2023-07-28T12:30:00","guid":{"rendered":"https:\/\/themeisle.com\/blog\/?p=75382"},"modified":"2023-08-14T11:19:47","modified_gmt":"2023-08-14T08:19:47","slug":"display-html-code","status":"publish","type":"post","link":"https:\/\/themeisle.com\/blog\/display-html-code\/","title":{"rendered":"Display HTML Code in WordPress: Here Are 3 Ways How to Do It"},"content":{"rendered":"\n

If you have a technical blog, there may be occasions when you need to display HTML code in your posts. For example, you might want to share a few coding hacks with your readers, and you might be looking for the best way to do this.<\/p>\n\n\n\n\n\n\n\n

The good news is that displaying HTML code in WordPress is super easy. Plus, you have several options to choose from. You can use native blocks or third-party tools to insert code into your posts and pages.<\/p>\n\n\n\n

\n
\n

\ud83d\udc49 In this post, we’ll take a closer look at why you might want to display HTML code<\/a> in WordPress. Then, we’ll show you three ways to do this<\/a>.<\/p>\n\n\n\n

Let’s get started!<\/p>\n<\/div>\n\n\n\n

\n\t\t
<\/div>\n\t\t\t
\n\t\t \t
\n\t\t \t\tCheck out 3 ways to display #HTML code in #WordPress \ud83d\udcfa\ud83d\udcbe<\/a>\n\t\t \t<\/div>\n\t\t \t
\n\t\t \tClick To Tweet \n\t\t \t\t<\/span>\n\t\t \t<\/a>\n\t\t <\/div>\n\t\t<\/div>\n<\/div>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Why display HTML code in WordPress<\/h2>\n\n\n\n

HTML<\/a> is the standard markup language for web pages. You can use it to create websites or add new elements to an existing one.<\/p>\n\n\n\n

If you’re a technical writer, you may need to share snippets of HTML code with your readers. For example, to show them how to build a landing page<\/a> or edit a WordPress file.<\/p>\n\n\n\n

In fact, here at Themeisle, we often display HTML in our WordPress tutorials:<\/p>\n\n\n

\n
\"An<\/figure><\/div>\n\n\n

Most readers \ud83d\udcda will want to copy this code and use it on their own devices. Therefore, it’s important that it’s presented clearly. Preferably, it should be inserted as a separate element so that it doesn’t blend into the surrounding text and confuse your readers.<\/p>\n\n\n

<\/div>\n\n\n\n

How to display HTML code in WordPress posts and pages?<\/h2>\n\n\n\n

Now, let’s look at the ways to display HTML in WordPress. All methods are super easy, though the first one is possibly the quickest.<\/p>\n\n\n\n

    \n
  1. Use the native code features in the Block Editor<\/a><\/li>\n\n\n\n
  2. Use a dedicated plugin<\/a><\/li>\n\n\n\n
  3. Embed HTML code from third-party tools<\/a><\/li>\n<\/ol>\n\n\n
    <\/div>\n\n\n\n

    1. Use the native code features in the Block Editor \ud83d\udc68\u200d\ud83d\udcbb<\/h3>\n\n\n\n

    The WordPress Block Editor<\/a> offers two main ways to display HTML in your posts or pages.<\/p>\n\n\n\n

    The first one is using the Inline Code formatting option. <\/p>\n\n\n\n

    Start by writing your code on the page. As you may notice, each line will appear as an individual paragraph block – don’t worry, we’ll show you how to fix this in a moment:<\/p>\n\n\n

    \n
    \"Adding<\/figure><\/div>\n\n\n

    Now, click on each paragraph block (or line) and select the More<\/strong><\/em> icon from the toolbar. You should see an option called Inline code – go ahead and click on it:<\/p>\n\n\n

    \n
    \"The<\/figure><\/div>\n\n\n

    Once you’ve done this for each line, select the entire code and click on the Stack<\/em><\/strong> icon in the toolbar:<\/p>\n\n\n

    \n
    \"The<\/figure><\/div>\n\n\n

    Now, here’s what this HTML code may look like on the front end:<\/p>\n\n\n

    \n
    \"Front<\/figure><\/div>\n\n\n

    This method may be a little time-consuming if you have a large piece of code. In fact, we only recommend it for short snippets.<\/p>\n\n\n\n

    However, you can use the Code<\/em><\/strong> block instead:<\/p>\n\n\n

    \n
    \"Code<\/figure><\/div>\n\n\n

    \u26a0\ufe0f Note that this is different from the Custom HTML block. The latter is used for adding HTML code to display a particular element (such as a widget or photo) on the page. <\/p>\n\n\n\n

    Enter the code you want to display into the block:<\/p>\n\n\n

    \n
    \"Using<\/figure><\/div>\n\n\n

    If you select the Style<\/strong> <\/em>icon in the Settings<\/strong> panel, you can change the color of the text and background, and customize the typography:<\/p>\n\n\n

    \n
    \"Customizing<\/figure><\/div>\n\n\n

    Here’s what it might look like on the live post:<\/p>\n\n\n

    \n
    \"Code<\/figure><\/div>\n\n\n

    As you can see, using the Code block can be an easy and quick way to display HTML in WordPress posts! \ud83e\udd29<\/p>\n\n\n

    <\/div>\n\n\n\n

    2. Use a dedicated plugin \ud83d\udd0c<\/h3>\n\n\n\n

    You can also display HTML in WordPress with a plugin like Highlighting Code Block<\/a>. This tool enables you to insert the highlighted code into your posts and pages.<\/p>\n\n\n\n

    To get started, install and activate the plugin on your site:<\/p>\n\n\n

    \n
    \"Installing<\/figure><\/div>\n\n\n

    Then, open the post or page where you want to display the code and look for the Highlighting Code Block:<\/p>\n\n\n

    \n
    \"The<\/figure><\/div>\n\n\n

    You can then enter your code into the block. You can also choose the language from the dropdown menu:<\/p>\n\n\n

    \n
    \"Using<\/figure><\/div>\n\n\n

    Let’s see what this will look like to your readers:<\/p>\n\n\n

    \n
    \"Front<\/figure><\/div>\n\n\n

    As you can see, the HTML tags have a different color from the input text, which makes the code easier to read. Additionally, there’s an icon at the top right-hand corner you can click on to highlight the entire text:<\/p>\n\n\n

    \n
    \"Highlighted<\/figure><\/div>\n\n\n

    This makes it easier for users to copy the code. \ud83d\ude0e<\/p>\n\n\n

    <\/div>\n\n\n\n

    3. Embed HTML code from third-party tools \u2699\ufe0f<\/h3>\n\n\n\n

    Some online code editors<\/a> like CodePen<\/a> enable you to embed code into your WordPress posts or pages. If you want more control over the presentation of your code, this might be the best option for you.<\/p>\n\n\n\n

    You can start by writing and customizing the HTML code in CodePen:<\/p>\n\n\n

    \n
    \"Writing<\/figure><\/div>\n\n\n

    Then, save your work and copy its URL. Open the page or post where you want to display HTML, and add the Embed<\/strong> block:<\/p>\n\n\n

    \n
    \"Using<\/figure><\/div>\n\n\n

    \ud83c\udfc1 Finally, enter the URL from CodePen and hit Embed<\/strong><\/em>. The embedded code may look something like this:<\/p>\n\n\n

    \n
    \"Embedded<\/figure><\/div>\n\n\n

    As you may have noticed, users can view both the HTML code and the result. This could make it easier for them to follow your tutorials and cross-check their work. <\/p>\n\n\n

    Go to top<\/a><\/div>\n\n\n\n

    Conclusion \ud83e\uddd0<\/h2>\n\n\n\n
    \n
    \n

    If you have a technical blog, you’re probably looking for an easy way to display HTML. For example, you might need to insert code snippets<\/a> into your posts, which users can simply copy and paste to use on their own site. Fortunately, the process is super quick and easy.<\/p>\n<\/div>\n\n\n\n

    \n\t\t
    <\/div>\n\t\t\t
    \n\t\t \t
    \n\t\t \t\tCheck out 3 ways to display #HTML code in #WordPress \ud83d\udcfa\ud83d\udcbe<\/a>\n\t\t \t<\/div>\n\t\t \t
    \n\t\t \tClick To Tweet \n\t\t \t\t<\/span>\n\t\t \t<\/a>\n\t\t <\/div>\n\t\t<\/div>\n<\/div>\n<\/div>\n\n\n\n

    To recap, here are three ways to display \ud83d\udda5\ufe0f HTML code in WordPress posts and pages:<\/p>\n\n\n\n

      \n
    1. \ud83d\udc68\u200d\ud83d\udcbb Use the Code block and Inline Code formatting in the Block Editor.<\/li>\n\n\n\n
    2. \ud83d\udd0c Use a dedicated plugin like Highlighting Code Block<\/a>.<\/li>\n\n\n\n
    3. \u2699\ufe0f Embed HTML code from third-party tools like CodePen.<\/li>\n<\/ol>\n\n\n
      \n\n\n\n

      \ud83d\udca1 If you found this post useful, you might also want to learn about how to upload an HTML file to WordPress<\/a>.<\/p>\n\n\n<\/div><\/div>\n\n\n\n

      Do you have any questions about how to display HTML code in WordPress posts and pages? Let us know in the comments section below!<\/em><\/strong><\/p>\n\n\n