How to write code into your post

- February 23, 2018

The best and simple way to write code into your wordpress post is to use <code></code> tags. You may use it with the <pre></pre> and <tt> </tt>tags.

The <code>, <tt> and <pre> tags will display the text in a monospaced font and use the font-size of <body> tag.
If you want to give them different color or style then you have to change their style in style.css. For this
1. Click on Editor option, dropdown of Appearance.
2. Go to Style.css and
3. change/Add following styles for <pre>and <code> tags.

pre, code{
 direction: ltr;
 text-align: left;
}
pre {
  color: #000; 
 margin: 10px; 
 padding:10px; 
  background: #f9fbf0;
    max-height: 504px;}
code {font-size:1.2em; 
 color: #e8e8e8}

If you want colorful code with some facility like highlighting, line number, Display Result etc., then you should use the wordpress plugins for that. There is a lot's of free plugins, some of the best plugins I'm mentioning here.

10 best wordpress plugins for displaying code into your post:

1. Simple Code Highlighter:

The Simple Code Highlighter Plugin uses Google Code Prettify Script to highlight your code. You don’t need programming skills to use’it. Simply press the button on editor toolbar and paste your code. The plugin does all the rest.

2. Crayon Syntax Highlighter :

This is a Syntax Highlighter built in PHP and jQuery that supports customizable languages and themes.
It can highlight from a URL, or WordPress post text. Crayon makes it easy to manage Language files and define custom language elements with regular expressions.

3. Mivhak Syntax Highlighter:

Mivhak is a lightweight syntax highlighter for WordPress, based on a slightly modified version of the great Ace Code Editor.
Mivhak comes with a simple settings panel that allows the user to setup basic plugin behavior and appearance. This plugin highlights your syntax While writing your code, and also checks for syntax errors.

4. Advanced Ads – Code Highlighter:

This is an add-on for Advanced Ads, the ad management plugin for WordPress.

After activating the plugin, you will see the code of ads in the plain text and code type highlighted like in any other professional IDE.
See the screenshots for an example.

This is the ideal add-on for people using advanced ad codes with JavaScript, HTML, PHP, or CSS.

5. Prism Syntax Highlighter:

Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind.
This plugin lets you control and use this awesome library in to your WordPress site.

CodeKhel