WORDPRESS CODEX

• SHARE
• Share
• Tweet
• Share
• Pin
• Share
• Share
• Share

For WordPress users who talk about coding-related tutorials they may want to post code in their posts, but unfortunately WordPress filters out any codes added to posts on blogs, pages, widgets or comments so the code does not appear perfect and important code tags are transformed into unclear characters. This will result in the code if the copy by the visitor to not run and cause an error.

To overcome the advantages of WordPress has many plugins developed by competent developers around the world to solve various problems and add various functions so that WordPress can be used for various things. To display the code in WordPress post, you can also find some plugins that can display the code perfectly. In this article, I will show you an easy way to install or display code in WordPress post.

WORDPRESS CODEX

HOW TO DISPLAY CODE IN BLOG WORDPRESS POSTING
In this article I will give an example of using a plugin named SynatxHighlighter Evolved to display the code in WordPress, And at the bottom I will also provide some alternative plugins that also have the same functionality.

To start it first you need to install and enable the Synatx Highlighter Evolved plugin. If you still do not understand how to install the plugin, please first read my tutorial on the complete Guide how to install WordPress plugin.

Once your plugin is enabled, Please go to the plugin settings page in Settings menu »SyntaxHighlighter to configure plugin settings.

By default, these plugin settings already work for most websites. However, you should review all settings and make changes if necessary. And in each option is a description to explain the purpose of the arrangement. If your settings are already sufficient, please click the save changes button to save your settings.

Syntax Highlighter Evolved uses a simple shortcode to display code. For every programming language you need to wrap your code in a shortcode for that language.

To display the PHP code you will wrap your code like this

[HTML] Your code is here [/ HTML]

This will appear in your post like this:

<? php echo "Hello World"; ?>

For CSS you will wrap your code like this:

[CSS] Your code is here [/ CSS]

It will appear on your site like this:

.entry-title {
font-family: "Open Sans", arial, sans-serif;
font-size: 16px;
color: # 272727; }

Syntax Highlighter will automatically highlight the code for a particular language. It will also add the line number and handle the indent tabs correctly. Your users can easily copy and paste the code snippet from your WordPress site.

PLUGIN TO DISPLAY CODE IN WORDPRESS - WORDPRESS CODEX
Inserting code snippets into WordPress is easier for you to embed and make it easier for users to read.

1. SYNTAXHIGHLIGHTER EVOLVED
SyntaxHighlighter Evolved is a plugin that I use as an example in this article and it is also a plugin I use on my blog centerklik, this is a popular snipet plugin code to pin the numbered code snippet and syntax that you want to post in WordPress post. All you need to do is wrap your code in the relevant shortcode and it will display like this:
Syntax SyntaxHighlighter 1
Main feature:
Added the line number to the code snippet
Added syntax highlighting to the code snippet
Different theme color options
Can add a special CSS class for styling options

2. CRAYON SYNTAX HIGHLIGHTER
Crayon Syntax Highlighter is another popular plugin that can add line numbers and code syntax to the code snippet in your WordPress post. When compared to SyntaxHighlighter Evolved, Crayon Syntax Highlighter has more customization. You can configure almost anything about the plugin in the settings tab.
You can also do things like automatically duplicate Sublime Text style (popular code editor):
code snippets crayon
Main feature:
Add a line number to your code snippet
Added syntax highlighting
Supports 65 different languages
Many styles, some of which mimic popular code editors
Box code easily adjusted to display your WordPress theme

3. OBED GIST
oEmbed Gist is a simple plugin that lets you easily embed code. Gist comes from GitHub and is an easy way to share snippets and code notes. To use it, you just need to paste your code into the main Editor and create a public digest.
Then, you just need to paste your query URL into WordPress Editor and the plugin will automatically embed your code snippet like this:
code-snippets-gist
Main feature:

Take advantage of GitHub Gist
Embed the cursor by pasting the URL
Can embed certain revisions or single files from multi-file files

4. WP-GESHI- HIGHLIGHT
WP-GeSHi-Highlight is another plugin that adds the line number and Highlight code syntax that you paste in the WordPress editor. As the name suggests, it is based on the GeSHi Highlight engine. It also lets you use standard tags as long as you specify the encoding language.
WP-GeSHi-Highlight is lightweight, both in terms of functionality and code output:
Main feature:
Add Highlight syntaxs using GeSHi
Added line numbering
Embed using tags
Standard tags with the specified language
Lightweight - just add one HTTP request

5. PASTEBIN
Pastebin is another website for sharing code snippets. This is very similar to the Gist GitHub tool I mentioned in number three. And as with GitHub Gist, this plugin makes it very easy to embed the Pastebin code into your WordPress site.

All you need to do is add your code to Pastebin, then you can simply paste the Pastebin URL into your WordPress editor to automatically insert your code snippet like this:
Whether the code has syntax highlighting will depend on the settings you use in Pastebin.

Main feature:
Embed code directly from Pastebin
Includes line numbers and (optional) Highlight syntaxs
Just paste the URL into WordPress Editor
Can also be pasted by using shortcode and pastebin ID
And that's an easy way to install or display the code in a WordPress post to make it look perfect and work well when copied by your visitors. And also some plugins that you can choose to make WordPress capable of displaying the code perfectly.

Hopefully this article useful for you and good luck