WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
  • Deals
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Tutorials» How to Easily Display Code on Your WordPress Site

How to Easily Display Code on Your WordPress Site

Last updated on September 14th, 2017 by Editorial Staff
208 Shares
Share
Tweet
Share
Pin
Special WordPress Hosting offer for WPBeginner Readers
How to Easily Display Code on Your WordPress Site

Do you want to display code on your WordPress site? By default, WordPress filters out any raw code added into blog posts, pages, widgets, or comments. In this article, we will show you how to easily display code on your WordPress site.

How to display code in WordPress blog posts

First you need to install and activate the Syntax Highlighter Evolved plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit Settings » Syntax Highlighter to configure the plugin settings.

Syntax Highlighter settings page

The default plugin settings should work for most websites. However, you should review all settings and make changes if necessary.

Each option has detailed description to explain what it does. Once you are done, simply click on the save changes button to store your settings.

Syntax Highlighter Evolved uses simple shortcodes to display code. For each programming language you need wrap your code in the shortcode for that language.

For PHP you would wrap your code like this:

[php]
<?php
echo “Hello World”;
?>
[/php]

It will appear in your post like this:

<?php
echo "Hello World";
?>

For CSS you will wrap your code like this:

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

It will appear on your site like this:

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

Syntax Highlighter will automatically highlight the code for that particular language. It will also add line numbers and handle tab indent properly. Your users will be able to easily copy and paste code snippets from your WordPress site.

How to Display Code in WordPress Without Using Plugin

Many bloggers do not run a development blog, so they don’t need to add sample code snippets in their posts very often. For rare occasions, you can add code by encoding the code into HTML entities. Like this:

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

The problem with converting code into HTML entities is that it is difficult to do manually. You can use online tools like this one, to convert code into HTML entities.

By converting PHP, HTML, JavaScript code into HTML entities, you can paste them into your WordPress posts. For additional styling you can wrap code between <code> and </code> tags.

We hope this article helped you find the best syntax highlighter plugin for WordPress. You may also enjoy our article about 13 plugins and tips to improve WordPress admin area.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

208 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • How to Start Your Own Podcast (Step by Step)

    How to Start Your Own Podcast (Step by Step)

  • How to Properly Move Your Blog from WordPress.com to WordPress.org

  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

12 Comments

Leave a Reply
  1. Adamu Malte says:
    Oct 8, 2018 at 4:10 am

    Thank you @Syed for your great tutorial.

    Reply
  2. manasa says:
    Sep 15, 2018 at 6:52 am

    Nice blog with excellent information. Thank you, keep sharing.

    Reply
  3. Anh says:
    Jun 30, 2018 at 11:23 pm

    Great, Just wonder how you can post the code inside

     

    and still make the code look like text.

    Like how you can post this code

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

    to your post without changing how it shows on the post.

    Reply
  4. Rushikesh Thawale says:
    Oct 3, 2017 at 2:03 pm

    Thank You for this post. :)

    Reply
  5. Christian says:
    Sep 14, 2017 at 9:17 am

    There’s a typo on the word ‘Syntax’…no wonder I was getting no results when I copied paste the text on WordPress plugin search! ;-)

    Synatx Highlighter Evolved plugin

    Reply
  6. Ahmed says:
    Mar 17, 2016 at 12:43 am

    Thanks Syed….Great tutorial. I want to ask you that how we can change the font size of code?

    Reply
  7. Dave Mackey says:
    Jan 6, 2016 at 11:21 am

    I think there is a problem with Syntax Highlighter Evolved in latest versions of WordPress. I, and others, are having it incorrectly display html entities. See support forums for more.

    Reply
  8. Md Abul Bashar says:
    Dec 22, 2015 at 5:03 am

    How to show code without plugin only coding?

    Reply
  9. John D says:
    Nov 15, 2015 at 7:00 pm

    Personally, I use WP-GeSHi-Highlight, which uses the standard GeSHi codes. I think I used a predecessor of the plugin featured here, but I had difficulty finding the language codes.

    Reply
  10. Ajay says:
    Oct 29, 2015 at 11:39 am

    Of late, I’ve found it easier to use GISTs to display code and then just embed the Gist in the post

    Reply
    • Mikhail S. says:
      Oct 30, 2015 at 4:04 am

      @AJAY, please tell me more about using GIST to display code samples.

      Thank you!

      Reply
    • Thomas A. Reinert says:
      Oct 30, 2015 at 11:29 am

      I do absolutely agree. They´re pretty well formatted and syntax-highlighted, they´re forkable and they´re versionable too. So WP GIST is the way to go for me at least..

      Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
OptinMonster
OptinMonster
Convert website visitors into email subscribers. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 25 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2019 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2019)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2019)
    • SiteGround Reviews from 1032 Users & Our Experts (2019)
    • Bluehost Review from Real Users + Performance Stats (2019)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Start a Podcast with WordPress (Step by Step)
    • How to Choose the Best Domain Name (8 Tips and Tools)
    • How to Setup a Professional Email Address with Google Apps and Gmail
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2019 – Step by Step Guide
Deals & Coupons (view all)
Dreamhost
DreamHost Coupon
Get 40% OFF on DreamHost and get a Free Domain.
Elegant Themes
Elegant Themes Deal
Get all 87 amazingly beautiful WordPress themes by Elegant Themes for only $69. That is like $0.79 per theme!
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • Awesome Motive

Copyright © 2009 - 2019 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

WordPress hosting by HostGator | WordPress CDN by MaxCDN | WordPress Security by Sucuri.