One thing that you will find when you start researching any form of software development is that there are two different ways to display lines of code on your website.

The first is to simply be careful and post code in a plain text format. To me, this was not an option because the fact that someone is looking for help in the first place means that they may not understand the nuances of syntax. I detest the use of quotes or brackets to show someone that what is inside is code, but that’s just my opinion.

The second method is to simply download a plugin for your content management system to neatly display code line by line. In the case of WordPress, I highly recommend the plugin WP-Syntax.

1. To install, simply navigate to the Plugins -> Add New page of yoursite.com/wp-admin and search for WP-Syntax. Alternatively, you can manually download WP-Syntax from the above link and FTP it directly to your WordPress install.
2. On the Edit Post section of WordPress you will find two tabs in the top right of the edit box, Visual and Text. You will want to use the Visual tab when writing text such as these instructions, and the Text tab to utilize WP-Syntax.
3. Wrap code in <pre lang=”LANGUAGE” line=”1″> and </pre>. You’ll notice that within the leading pre tag there is the number 1. Changing this to any number will alter the displayed line number in the generated code box, which is useful if you are referencing existing code.

12
13
14
15

/*R,G,B,Alpha values of background*/
.well{
background-color: rgba(250, 250, 250, 0.50);
}