Web DeveloperWordPress

Easy Syntax Highlighter for WordPress (Code Syntax Block)

Written by:

If you enjoy sharing your code with the world like me, then you will for sure want the best syntax highlighter for WordPress. The Code Syntax Block plugin will easily add a ohh so beautiful syntax highlighter to WordPress.

This WordPress plugin is even better than the Crayon syntax highlighter. Now sure, code syntax block is not as feature-tastic (real world) as Crayon, but this thing WORKS! There practically no setup to add this syntax highlighter to your website. Unlike with Crayon where I had to do a good amount of configuring to get it where I wanted.

How to Add Syntax Highlighter to WordPress

  1. Install the Code Syntax Block plugin
  2. Add your code into a “code” block in the editor
  3. Select your code’s language
  4. Show the syntax highlighter on your website!

Install the Code Syntax Block plugin

Login to your WordPress admin panel, then browse over to the plugin installer page. Search for the “code syntax block” plugin.

Install and active that sucker! (also available on WordPress.org here)

easy syntax highlighter wordpress | install the code syntax block plugin on wordpress

Add your code into a “code” block in the editor

To show source code on your website, without having WordPress FREAKING out, you have to add a new block type of “code” to your post. If you don’t see “code” by default, then search the block types for it and then select it.

easy syntax highlighter wordpress | add a code block to your wordpress post

From here, you can type in just about any code language you want, right into your WordPress website.

Select your code’s language

Once your code block has been added to the post, you must select the language being displayed. If you do not select a language, then the syntax highlighter plugin will NOT show on your web page.

Check this out:  Force www or non-www in Your Website's URL with .htaccess

In the block settings menu, on the right hand side of the page, you will now see a settings section for each code style block you use. From here, you can select the programming language your code block is for.

easy syntax highlighter wordpress | select the code's language in the post editor

Set a default code language?

You can set a default code language for your website, however you have to do it by manually adding a filter to your theme. Which means most people would have to manually add the filter again if their theme gets an update.

That being said, to set a default language do this:

Open your themes functions.php file (most likely located in the “/wp-content/themes/YOUR_THEME” folder). Then add the following line to it:

add_filter( 'mkaz_code_syntax_default_lang', function() { return 'php'; });

Update the return parameter to the default language you desire. Mine is set to PHP. Then save the functions.php file and take a look at your web pages.

Show the syntax highlighter on your website!

Before Code Syntax Block, your code would be displayed on your website page. But when it was loaded, your site would show an ugly “preformatted” box with no style.

Now with this amazing syntax highlighter, WordPress will show your code is a beautiful way:

easy syntax highlighter wordpress | show off your beautiful code on your wordpress website

You can now share more source code with the world, by using the best and easiest syntax highlighter for WordPress. Happy coding!

Leave a Reply

%d bloggers like this: