How to show code as code in WordPress post, No plugin!

This article was written by in June 3, 2015, & may not be posted on other sites!
Original source url for this article: How to show code as code in WordPress post, No plugin!

How to show code as code in WordPress post, no plugin!
If you want to display some html or php code as actual code inside a post in WordPress, there are some tricks, no plugin needed! This is how to show code as code in WordPress post:

 

Show code as code in WordPress post or page

To show code as actual code might be tricky, but here are some hands on tips. When working in WordPress there is a “text” tab in the post / page editor that shows all the html code raw. Here is where you can add some tags and elements to make sure the code is displayed as plane code and nothing else.
How to show code as code in WordPress post, no plugin!

Code within a paragraph
Use the <code> tag, something like this:
<code>wp_title()</code>

The <pre> tag
The <pre> tag is used when you want to display code as code within a box for people to copy. Something like this:

<pre>wp_title()</pre>

How to show code within an html element
the <code> tag might not be enough when trying to display html elements like a div:
<code><div class="my-div"></code>
When trying to display the <div> as actual code, you have to replace the < character with
&lt; and the > character with &gt; something like this:
<code>&lt;div class="my-div"&gt;</code>

How to show a link as code, and not a link
<code>http:&#47;&#47;my-website.com&#47;index.php</code>

 

Other usefull examples to show code as code in WordPress posts / pages

If you are having problems to show code as code, try to replace the opening and closing tag with the following characters:
< = &lt; or &#60;
> = &gt; or &#62;
/ = &#47;
] = &#93;
[ = &#91;
" = &quot; or &#34;
' = &#39;
“ = &ldquo; or &#8220;
” = &rdquo; or &#8220;
‘ = &lsquo; or &#8216;
’ = &rsquo; or &#8217;
& = &amp; or &#38;

 

Spread the word

Facebooktwittergoogle_pluslinkedinmail

Leave a Reply

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