What's WP
Our everything is about WordPress - best choice of WordPress users!
How to Highlight Source Code in WordPress Post?

How to Highlight Source Code in WordPress Post?

Now, more and more people build professional and technical websites that offer snippets of code for visitors to copy and paste easily. However, presenting codes in the form of normal text can mess the entire post. Although WordPress already offers pre tag to mark source codes in texts, the codes are presented without any formatting or highlighting. The default style of the tag is plain, and thus, coding parts can be easily ignored.

However, coding staffs are an indispensable component of technical posts, which decide the quality of the article. Therefore, highlighting source code in WordPress post is a necessary step to improve post content formatting. Considering some people may have little-to-no understanding of the whole process, our professional and experienced editors summarize several practical methods in below, expecting readers can find an ideal way to highlight source code.

Using WordPress Sourcecode Shortcode

highlight codeWordPress offers Posting Source Code support that provides a way to view the post source code. The service comes with shortcode that can be used to wrap around source code and display the code in its formatting with syntax highlighting. Note that the service only supports for some popular languages, such as CSS, Script3, HTML, Java, PHP, Perl, and so on so forth.

In the following, our editors are going to show you an example that uses Sourcecode Shortcode to highlight code in WordPress post.

Using WordPress Sourcecode Shortcode

Creating Code

Apart from applying service offered by WordPress, you can also create code to highlight source code with more styles. You may wonder that how can you create codes without any coding knowledge. But don’t worry, for this code is extremely simple and our editors are going to show you an example as below.

Creating Code

Using Plugins

As the most welcomed blogging platform all over the world, WordPress devotes to making content management easy and time-saving. Thus, it creates all kinds of plugins to help people manage their sites, such as translation plugins, MailChip plugins, and of courses, source code highlighting plugins. Therefore, if you consider coding staffs are tedious and complicated, then, plugin is an advisable choice to highlight source code.

Syntax Highlighter Evolved

The plugin allows webmasters to put syntax-highlighted code to their websites without making any changes or losing code formatting. If you want to install Syntax Highlighter, you need to use WordPress 2.7 or higher version. Besides, the developer of the plugin keeps updating it usually to ensure it is up-to-date and the last updated time is in April, 2014. Due to its easy-to-use features and advanced design, till now, the plugin has been downloaded by more than 388,000 webmasters.

Syntax Highlighter Evolved

HTML Editor Syntax Highlighter

HTML Editor Syntax Highlighter helps to embed syntax highlighting in the page or post HTML editor with rich features. The plugin allows users to save pages and posts with Ctrl+S and offers dark and light editor color themes, refreshed full-screen mode, as well as Toggle full screen with Esc hotkey or F11.

HTML Editor Syntax Highlighter

Enlighter

Enlighter is one of the best plugins to highlight source code in WordPress page and posts. It supports all popular languages, theme customizer, full visual editor, syntax highlighting inline, text editor with short codes; CSS based themes, code groups, and so on so forth.

However, all mentioned features are not the standout point of the plugin. Its most eye-catching feature is that the plugins is customizable, which integrates with stunning configuration features in option page and supports outputs in different formats, changeable theme engines and language, and many more.

Enlighter

Syntax Highlighter Spacegray

This plugin is not as popular as the former three ones, but is still very practical and easy-to-handle. As the name suggests, Syntax Highlighter aims to highlight syntax in WordPress websites. With this plugin, all codes in your website will be displayed in an attractive way in multiple colors without losing its format.

Syntax Highlighter Spacegray

Author

Lucy has been a very experienced SEOer, technical writer, web developer, c# developer since 2002. Now she owns a startup in San Francisco, CA, focusing on running a couple of blogs to share knowledge and experience with global readers and deliver exceptional results to global sponsors by leveraging the power of Internet.

Close

Want to Learn More About WordPress?

Get Our Free Themes, Plugins, Support, SEO Tips, and Other Tutorials!

Email *