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.
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
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.
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.
- Lightweight 3rd party scripts and styles.
- Most supported Languages with GeSHi syntaxhiglighter
- Custom Styling Code Color Schemes.
- Supports Hook to customize GeSHi initialization settings.
- Long time updates
- Lack of display inline code in paragraph.
<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.
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
- 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-valuein 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.
Enables syntax highlighting in the integrated themes and plugins source code editors. Supports PHP, HTML, CSS and JS.
- 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)
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.
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.
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.
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.
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.