9 Syntax Highlighter Plugins and Services for Embedding Code Snippets in WordPress

WordPress is using TinyCME as default editor, so displaying code within a post is not an easy task. That is why there are some amazing developers who create plugins to make that solve this niggly issue.
However, there are some simple and effective ways to do this by use WordPress code snippet plugins or 3rd-party services there can help you maintain the original formatting of any code being inserted in WordPress posts and make your blog a lot more appealing to the readers.
Following are a list of best WordPress plugins or 3rd-party services to highlight code snippets within your blog that I have personally tried.
Notes:

Most syntax highlighters use either shortcode or make you add some obscure CSS classes to all <pre> tags that you want to highlight.

Syntax Highlighter WordPress Plugins

1. WP-Syntax

WP-Syntax
WP-Syntax

Currently, I’m using this plugin to display code snippets on this website. WP-Syntax provides clean syntax highlighting using GeSHi – supporting a wide range of popular languages for embedding source code within pages or posts.

We Recommend Digital Ocean

NARGA.NET strongly recommends for all of your web hosting needs. For VPS cloud hosting at just $5/month.

Visit DigitalOcean.com then Get $10 Free Credit Digital Ocean Promo Code

How am I build perfect VPS with low RAM/CPU for Hight-Traffic WordPress websites

It supports highlighting with or without line numbers and maintains formatting while copying snippets of code from the browser.
It avoids conflicts with other 3rd party plugins by running an early pre-filter and a late post-filter that substitutes and pulls the code snippets out first and then pushes them back in with highlighting at the end. The result is source code formatted and highlighted the way you intended.
Advantage

  • Lightweight 3rd party scripts and styles.
  • Most supported Languages with GeSHi syntaxhiglighter
  • Custom Styling Code Color Schemes.
  • Supports Hook to customize GeSHi initialization settings.

Advantage

  • Long time updates
  • Lack of display inline code in paragraph.

2. Code Prettify

Code Prettify (Syntax Highlighter)
Code Prettify (Syntax Highlighter)

In my opinion, this plugin is promising. is a new plugin with just 31 line of code that enqueues the Google Code Prettify library (one minified javascript file) which then parses all <pre> tags on the page, detects the correct language and lazy-loads the necessary syntax module, and applies the highlighting. I’m switchingI’ve switched to it soon, very lightweight and no shortcode, no custom CSS classes — just magic.

3. Crayon Syntax Highlighter

Crayon Syntax Highlighter
Crayon Syntax Highlighter

A Syntax Highlighter built in PHP and jQuery that supports customizable languages and themes. It can highlight from a URL, a local file or WordPress post text. Crayon makes it easy to manage Language files and define custom language elements with regular expressions. It also supports some neat features like:

  • Integrated Theme Editor!
  • Tag Editor in both Visual & HTML editors
  • Toggled plain code
  • Toggled line numbers
  • Copy/paste code
  • Open code in a new window (pop-up)
  • Line wrapping
  • Code expanding
  • Minimizing
  • bbPress 2 support
  • Converting legacy code in blog posts/comments to <pre>
  • Remote request caching
  • Mixed Language Highlighting in a single Crayon
  • Mini Tags like [php][/php]
  • Inline Tags floating in sentences
  • Crayons in comments
  • `Backquotes` become <code>
  • <pre> tag support, option to use setting-value in the class attribute
  • Valid HTML 5 markup
  • Visual & HTML editor compatible
  • Mobile/touchscreen device detection
  • Mouse event interaction (showing plain code on double click, toolbar on mouse over)
  • Tab sizes
  • Code title
  • Toggled toolbar
  • Retina buttons
  • Striped lines
  • Line marking (for important lines)
  • Line ranges (showing only parts of the code)
  • Starting line number (default is 1)
  • Local directory to search for local files
  • File extension detection
  • Live Preview in settings
  • Dimensions, margins, alignment, font-size, line-height, float
  • Extensive error logging

A powerful WordPress plugin to display your code snippets, it’s suitable for beginner to advanced user.

4. Advanced Code Editor

Advanced Code Editor
Advanced Code Editor

Enables syntax highlighting in the integrated themes and plugins source code editors. Supports PHP, HTML, CSS and JS.
Effectively edit your themes or plugins when you only have access to a browser, by enabling syntax highlighting in WordPress integrated source code editors. Supports PHP, HTML, CSS and JavaScript

Features

  • Mixed language Syntax highlighting (PHP,HTML,JavaScript and CSS)
  • Smart Search (string or regex).
  • Search and Replace.
  • Full Screen editor.
  • 11 editor themes.
  • Multiple Undo & Redo (editor remembers all edits).
  • AutoComplete with over 3500 WordPress Functions.
  • Tested and Works with IE8,9,10 FF3.6 and up, chrome 8 and up.
  • Ajax save file. (NEW)
  • Ajax Create new file. (NEW)
  • Ajax Delete file. (NEW)
  • Ajax Create new directory. (NEW)
  • Jump To Line with hot key Crtl + G. (NEW)
  • File Tree View (NEW)
  • Download theme button.(NEW)
  • Download Plugin button.(NEW)
  • Download file button.(NEW)
  • Editor CodeFolding.(NEW)
  • Toggle file tree on/off.(NEW)
  • Download file button.(NEW)
  • Comment code out/in.(NEW)
  • Auto format and indenting code.(NEW)
  • Built-in version control.(NEW)

5. SyntaxHighlighter Evolved

SyntaxHighlighter Evolved
SyntaxHighlighter Evolved

SyntaxHighlighter Evolved allows you to easily post syntax-highlighted code to your site without losing it’s formatting or making any manual changes. It uses the SyntaxHighlighter JavaScript package by Alex Gorbatchev.
You’ve read a listed of 5 BEST WordPress plugins to beatify your codes that I have personally tried. On next part of article, I will refer you to a list of code snippets ember online services.

Embedding code snippets in your post with Code Snippets Repository

1. GitHub Gist

Gist is a simple way to share snippets and pastes with others. All gists are Git repositories, so they are automatically versioned, forkable and usable from Git.

Gist Github
Gist Github

Gists don’t count against the number of private repositories for an account. There’s no limit on the number of gists that can be created by a user, including users with free accounts.
Gist is very simple, just copy/past, save then embedding in your article.

2. Snipplr

Snipplr opened its doors on June 27, 2006. There are currently 91672 registered users and 55037 snippets. Like Gist GitHub, user can create a code snippet then embedding it to your blog. With Snipplr you can keep all of your frequently used code snippets in one place that’s accessible from any computer. You can share your code with other visitors and use what they post, too.

3. PasteBin

Pastebin.com is a website where you can store text for a certain period of time. The website is mainly used by programmers to store pieces of sources code or configuration information, but anyone is more than welcome to paste any type of text. One of the most popular tools of this kind, Pastebin supports a huge list of languages.

4. CodePen

CodePen is an HTML, CSS, and JavaScript code editor in your browser with instant previews of the code you see and write.

CodePen
CodePen

Need to build a reduced test case to demonstrate and figure out a bug? CodePen is great for that. Want to show off your latest creation and get feedback from your peers? CodePen is great for that. Want to find example of a particular design pattern for you project? CodePen is great for that.
I’ve fell in love with CodePen after the first used. It’s best choice for presenting your works, tutorials …

Choose the best solution to embedding code snippets in WordPress

A plethora of plugins is present out there, but finding the best ones is tough. There are a lot of utilities here to choose from and I would love to hear your feedback on those that you’ve tried.

2 thoughts on “9 Syntax Highlighter Plugins and Services for Embedding Code Snippets in WordPress

  1. Hello Nguyen,

    You convinced me on option no. 2: Code Prettify ;-) However I’m not able to make it work.

    I downloaded the zip file from GitHub, uploaded onto my WP, but how do I make the skin Desert to work on my installation? Could you explain exact steps please (where and what do I upload files)?

    Thanks a million!

    Reply

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=""> <strike> <strong>

Scroll To Top