how to display code on wordpress site

How to Display Code in WordPress Site

Are you looking for the simplest instruction about, how to display code in WordPress site, because found that it is impossible to make it by default? In such a case, you are on the right page. Now you will learn two quick methods to do that.

Perhaps you will also be interested in our article on How to Convert PSD to WordPress.

how display code wordpress
How to Display code on WordPress Site

The Setting of a Plugin

The following algorithm of actions will help you to try this method:

  1. Download and set up the Enlighter – Customizable Syntax Highlighter.
  2. Open up a page with Settings.
  3. Go to a subcategory “Syntax Highlighter”.
  4. Set, proper for you, settings of the software model. In most cases, default settings are right for all types of websites, but it would be nice to check them just in case.

The system you have just set up will display HTML code on website by using specific shortcodes. Pay attention, every language of programming has a proper set of microcode functions, by which it has to be wrapped. For example, if you deal with PHP, wrap your script in the following way:

how to display code on wordpress

If you make everything right, it will be displayed on your site like on this picture:

<?php
echo “Hello World”;
?>

If you use CSS, wrap script like it displayed on the following picture:

display code wordpress site

The result:

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

From now, every user of your site will be able without any problems to copy your code. The software model will by his own highlight the script to every concrete language.

Alternative way

You can also display the code WordPress site without using any plugin, by doing encoding of the script into HTML entitles. Example:

&gt;?php echo “Hello World”; ?&lt;

The bad thing about this method — it is very difficult to do it by yourself, manually. But you can make things easier — just use special online instruments for encoding to display code. For example, among them, you can find a tool for converting code into HTML entitles. Using this tool, you will be able to paste languages of programming into posts on WordPress. If you want to try additional styling, put a code between two tags: <code> and </code>.

1 Star2 Stars3 Stars4 Stars5 Stars (5.00 / 5, votes: 1)
Loading...

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>