How to Insert Raw HTML, CSS and JavaScript Codes in WordPress?
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 into WordPress posts.
Using WordPress Visual Editor
WordPress has two editors – visual and text editors. 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.
Adding Raw Code in WordPress Visual Editor
This is sufficient to showcase simple raw codes of few lines.
Using WordPress Text 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.
Pasting Code Under WordPress Text Editor
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.
In order to overcome these problems, the recommended option to showcase raw code is to use a plugin. There are many plugins out there are we use Crayon Syntax Highlighter due to its ease of use.
Using Crayon Syntax Highlighter
After installing and activate the plugin, it will create a shortcut menu “Settings > Crayon”.
Crayon Syntax Highlighter Global Settings
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.
Syntax Highlighter Code Button
Click on this “Code” button to see the “Add Code” popup.
Adding Code in Crayon Syntax Highlighter
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.
Crayon Syntax Highlighter
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:
- 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.