Looking For A Fast, Responsive, SEO Optimized & Self Customizable FREE WordPress Theme?

Display
Pricing
My Account

Display Code Snippets in WordPress Without Using Plugin

Last Updated on February 3, 2018
by Neeraj Agarwal

If you have been a regular reader of this blog then you would have read my post on “displaying code snippets in WordPress posts”. I explained it using a plugin. These days I am focusing on making things happen without any plugin. So again I am invoking this topic but this time we will take different route to achieve similar goal.

Most of the programming blogs authors write code in their blog posts. Sometimes browsers interpret those code blocks and as a result they it may end up displaying something weird. Let’s learn how we can display code in posts properly without using any plugin. It would be really beneficial for those who rarely write codes in their  blog. It will improve page load time by avoiding any extra plugin for displaying code correctly.

WordPress has <pre> and <code> tags which can be used to make your code look different from normal text.  Further you can style these tags and make your code block look prettier.

 While using <pre> and <code> tag you may face various problems because even if your code is wrapped inside <pre> and <code> tags, few characters like “<” and “>” are interpreted as code tags which overall effects whole code block.

Note: Remember to replace  “<”  by  “&lt;” and  “>”  by  “&gt;”

TIP: Use this application  “Postable” . Just paste your code and you will get it in a format that will be easily interpreted as normal text by browsers.

For example let’s suppose I have to display code

<?php echo “Hello WordPress”; ?>

in my post then I will have to write:

<pre><code>

&lt;? php echo "Hello WordPress"; ?&gt;

</code></pre>

 When I posted this in WordPress, it resulted into something like this:

We are able to show code in our WordPress post. Now its time to make it something more pleasing. Go to theme editor and open style.css. In style.css file you can define your own style to <pre> and <code> tags. for example I used this style code:

pre {border: solid 1px blue;
    font-size: 1.3 em;
     color: blue;
    margin: 10px;
    padding:10px;
    background: #FFFFB3}
code {font-size:1.2em;
    color: #008099}

You can paste this code anywhere in your style sheet. But I recommend to paste it without effecting flow of code in your style.css.

display_code3

save style.css and then my code block looks like this:

display_code2

Conclusion:

You can add your own custom CSS and make it look your way. You are not using any plugin :). If you want to highlight your code and use some funky display option then you can go for plugin because plugin will save your time and efforts. Also if you have to write code in almost your all posts then go for a plugin because your time is more precious.

Leave a Reply Cancel reply

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

InkThemes Logo

Customize Your Website With Beautiful Premium WordPress Themes, Templates & Plugins.

One Click Installation With Advanced Functionality & Awesome Support.

For any query contact us at:
  • [email protected]
Products
  • WordPress Themes
  • Email Marketing
  • Subscription Billing
  • Form Builder
  • Email Verification
Terms of Usage
  • Terms and Conditions
  • Privacy Policy
  • InkThemes Branding
  • Affiliate
  • Contact Us
Join Us
  • Follow us on Twitter
  • Be a fan on Facebook
Analytics
heap-logo1
Help and Support
  • Support
  • Documentation
About
  • Who we are?
  • Careers
Links
  • Blog Categories
  • Marketplace Categories

© 2023 InkThemes LLC. All rights reserved.