” Are you Struggling to display code on your WordPress site? In this guide, we will tell you how to add professional-looking code snippets easily to your website with user-friendly tools that will make your code look polished and stylish.

Here are Three methods to Display Code on your wordpress website.

  • Default WordPress Editor
  • Code Snippet Plugin
  • Manually Editing wordpress Theme.

Method 1:Default WordPress Editor:

This Is one of the easiest methods to show code on your wordpress website. By using Gutenberg, you can easily add code anywhere on your post or page.

  • Go to the post or page where you want to add code snippets.
  • Now click on the +Icon and Select the code block
  • Write the code snippet under the selected code block.
  • The code will be displayed after saving the page/post.

Method 2:Code Snippet Plugin:

The second method is to install any code snippet plugin for Adding code to your wordpress website. The code snippet plugin helps you to highlight syntax and line numbers too.
Code snippet plugins are useful for those users who want to add codes to their websites frequently.
Installing the Code snippet plugin would be helpful for users to read and copy code.

  1. Install and activate a syntax highlighting plugin. There are several plugins available in the WordPress repository, such as “SyntaxHighlighter Evolved,” “WP-Syntax,” “Prism Syntax Highlighter,” and more. You can install any of these plugins from the WordPress dashboard. I installed the SyntaxHighlighter Evolved plugin.
  • Now click the + button to add SyntaxHighlighter block.
  • Now Add code and select code language.I wrote php code and selected php language,.
  • You can customize the appearance of your code by modifying the settings of the syntax highlighting plugin. For example, you can change the color scheme, font size, line numbers, and more.
  • Once you have added the shortcode to your post or page, you can preview it to see how the code will be displayed. If everything looks good, you can publish your post or page and the code will be displayed with syntax highlighting.

Method 3:Manually display code:

This method is easy for those users who are experts in coding. This method is very light weighted but requires a little bit of technical knowledge.

To display code manually in WordPress without using a block or text editor, you can follow these steps:

  1. Open the post or page where you want to display the code in the WordPress editor.
  2. Switch to the “Text” mode of the editor by clicking on the “Text” tab at the top-right corner of the editor.
  3. Type or paste the code you want to display on the post or page. Make sure to format the code using the correct syntax and indentation.
  4. Wrap the code inside the <code> tag to indicate that it is a code block. You can also add the language attribute to specify the programming language used in the code. For example, <code class="language-php"> ... </code>.
  5. Optionally, you can add the <pre> tag before the <code> tag to preserve the formatting and spacing of the code. For example, <pre><code class="language-php"> ... </code></pre>.
  6. Save or publish the post or page to view the code on the live website.

Note: This method requires knowledge of HTML and programming syntax. It may also not include syntax highlighting, which can make the code difficult to read. Using a syntax highlighting plugin or a block editor can make the code more readable and visually appealing.

Categorized in: