FREE 2WEEKS SHORT COURSE How to display code in wordpress posts – Customizable Syntax Highlighter - Kekeli University
Welcome to Kekeli University, an online platform for self-learning and one on one teaching.

How to display code in wordpress posts – Customizable Syntax Highlighter



If you're accidentally reading an article that shares code, you'll find the code will be placed in a very separate box for the rest of the article.

You also want your own website to have a highlighter code frame as well.

Then today An Tran Digital will introduce up to 1 plugin, I have tried many plugins, some plugins may be difficult to use, not compatible with some versions of wordpress, etc., then I found the Customizable Syntax Highlighter  plugin to create a display. Display code in wordpress posts (create frames containing code in wordpress posts) easy to use and customizable.

It is suitable for the theme and wordpress version 5.8.4 I am using.

NOTICE: Because the plugin above will have some versions of wordpress that do not support, you can install the plugin " Crayon Syntax Highlighter " to function as well as the plugin in the article. An Tran Digital Thanks!!!

Installation Instructions

  • Step 1: Go to Plugins -> New Settings enter in the search box Customizable Syntax Highlighter –  then click  Install & Activate
Customizable Syntax Highlighter
  • Step 2:  Go to  Create post,  select the icon like in the picture
Customizable Syntax Highlighter
  • Step 3:  Next, just leave the Code  in the frame -> Click OK
Customizable Syntax Highlighter

Here are the results:

< form action= '/search' id= 'search-us' method= 'get' >
< table >
< tbody >
< tr >
< td class = 'search-boxy1' >
< input id= 'search-boxy1' name= 'q' onblur= 'if(this.value=='')this.value=this.defaultValue;' onfocus= 'if(this.value==this.defaultValue)this.value='';' type= 'text' value= 'Cari artikel lainnya...' / >
< /td >
< td class = 'search-button1' >
< input id= 'search-button1' type= 'submit' value= '' / >
< /td >
< /tr >
< /tbody >
< /table >
< /form >


In addition, you can customize the interface of the frame containing the code.

You go to  Enlighter -> Appearance. Right in the Theme  section , click on it to show a list for choosing the theme you like best.

Recently, An Tran Digital introduced you how to create a frame containing the code in the article when posting on the website.

Thank you to everyone who viewed this post.

Wished everyone success !!!