There are many occasions you may need to showcase the raw HTML, CSS or JavaScript codes inside the posts and pages of your WordPress site. This is necessary, especially when you are running a tutorial site or explaining on how a piece of code is working. WordPress is smart software that converts most of the formatting into a browser readable content. Unfortunately this is exactly what you don’t need in order to display raw code. In this article we will check out more on WordPress visual and text editors along with how to insert raw codes using Gutenberg block editor in WordPress posts.
Insert Raw Code in WordPress Posts
We will discuss the following methods with and without plugin to insert raw code in WordPress site.
1. Using Visual Editor – Classic Editor
WordPress has two editors – visual and text editors when using Classic editor interface. The visual editor is what you generally use for creating the content while the text editor is used to view the source code. Let us take an example of inserting the raw HTML image code for inserting an image.
The raw HTML code for inserting image is as below:
<img src="https://img.webnots.com/2016/03/CSS-Box-Model-Element.png">Let us create a test post and paste the above code under “Visual” editor. Publish the post and see the raw HTML code will exactly appear as it is.
This is sufficient to showcase simple raw codes of few lines.
2. Using WordPress Text Editor – Classic Editor
Now paste the same code under “Text” editor and update the post. When you switch to visual editor, WordPress will automatically convert the code and show the image instead of the raw code.
We also used <code> or <pre> tags to insert the code under “Text” editor. But the result is same that WordPress auto converts the code into image. So basically, you can’t use “Text” editor to insert raw codes into a post.
The above testing indicates that you can only use “Visual” editor to show raw codes as it is. The content pasted on a “Visual” editor is encoded and hence read in the same structure. For example, less than (<) symbol entered under “Visual” tab will be converted to an escape character “<” which can be seen under “Text” tab.
Drawbacks of Showing Code in Visual Editor
There are multiple issues in showing the raw code under “Visual” editor like text content.
- It looks very simple, especially when you have bulk of code it will look congested.
- No line numbers, coloring and formatting.
- You can’t insert shortcodes as it is with square brackets on visual editor.
- When you paste the image URL, WordPress will paste the actual image. So every time you need to press “Undo” to bring the URL back instead of the image or video.
- Straight double quotes will be converted to slanted double quotes to treat it like a text.
3. Gutenberg Code Block
In order to overcome these problems, you can use a third-party plugin like Crayon Syntax Highlighter. However, these syntax highlighting plugins can affect the page loading speed due to the JavaScript. The best option is to use Gutenberg Code block. When you are in the editor, insert a Code block and paste your code. Below is an example of how the code will look like in the block.
<html>
<head>
</head>
<body>
</body>
</html>Remember, the design of the code block vary depending upon your theme. However, you can customize the <pre> element by adding custom CSS to change the appearance. For example, you can use the below code in “Customize > Additional CSS” section for the pre element. If required, you can also add the font family to show the code with different font on your site.
pre {
max-height:400px;
overflow:auto;
padding:20px;
margin-bottom:20px;
white-space:pre !important;
background:#f7f7f7;
border-radius:5px;
}This will increase the visibility of the code and display it properly with padding and margin. Also, max height attribute will restrict the height while white space attribute break the line. You will see the scroll bar in both horizontal and vertical directions, so that users can scroll and view the code.
Note: Though preformatted and code blocks work similar, make sure to use code block for inserting raw HTML, CSS and JS codes.
4. Enhancing Gutenberg Block with Plugin
Though you can customize Gutenberg code block with custom code, it will not be same as using syntax highlighting. If you need to use the raw code throughout your site using syntax highlighter plugin is the best option. Good news is that you can enhance the existing code block without any additional JavaScript framework and highlight the syntax. Go to “Plugins > Add New” section and install “Syntax-highlighting Code Block (with Server-side Rendering)” plugin. This plugin will not have any additional settings or options. However, it will automatically convert the code block and apply syntax highlighting on the frontend.
There will be no impact on the speed as there is no additional JavaScript is needed for using this plugin. In addition, it is also compatible with AMP so that your syntax highlighting will stay intact on AMP pages as well.
5. Using Complete Syntax Highlighter Plugin
The last option is to use a complete syntax highlighter plugin when you want to showcase your codes like a professional. Crayon Syntax Highlighter was the one of the best syntax highlighting plugins for WordPress. Though the plugin was discontinued, there is a forked version Urvanov Syntax Highlighter available with similar features. After installing and activate the plugin, it will create a shortcut menu “Settings > Crayon”.
Here you can set global site wide parameters to be effective for all your raw codes.
- Set your default theme, font, height, width and margins.
- Enable or disable the toolbar on top of the raw code.
- Choose one of the 65 available languages as default language style.
- View all posts with crayon syntax highlighting.
- Enable debugging and view log files.
Highlighting Raw Code Block on Post
The plugin will add a “Code” button on the post editor as show below.
Click on this “Code” button to see the “Add Code” popup. If you are in Gutenberg editor, insert a Urvanov Syntax Highlighter block and click on the “UrvanovSyntaxHighlighter” button.
This will open the “Add Code” pop-up as shown below:
Paste the raw code and customize the settings as per your need. The settings will appear from the global parameters and you can overwrite for individual code blocks. The raw code block will appear like below and you can use dark theme to align with your site’s theme.
Advantages of Using Syntax Highlighter
The biggest advantage of using syntax highlighter is that all raw codes on your site will have uniform look. It also has the following additional benefits:
- Urvanov or Crayon Syntax Highlighter has built-in theme editor to have global settings.
- Inline editor to modify the individual parameter at each code block level.
- The top toolbar has many useful options like toggle line numbers, toggle plain code, copy mode and open the code in a separate browser window.
- You can fix the height of the code block and enable scrollbar within the frame. This will help to display large block of code within smaller height.
- Mobile responsive.
- Insert HTML, CSS, JavaScripts, PHP and any other code blocks without interfering with WordPress code.
Leave a Reply
Your email is safe with us.