How to Embed Code Snippets into WordPress Posts ?

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 niggle issue.

However, there are some simple and effective ways to do this by use WordPress Syntax Highlighter 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 the 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.

Top 6 Best Free Syntax Highlighter WordPress Plugins

1. Code Prettify

Google Code Prettify

Code Prettify

WordPress plugin for automatic code highlighting using the Prettify library. No shortcodes, no bullshit. 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’ve switched to it, very lightweight and no shortcode, no custom CSS classes — just magic.

Read more: How to use Code Prettify ?

2. SyntaxHighlighter Evolved

One of the best plugin for highlight code snippet develop by Alex Gorbachev. Display codes into post Simple and Clean , Also allow to show code in new tab so it makes easy to copy/paste code, and allow print code feature. One of the best feature is you can highlight important points in code snippet Such as on above snapshot of code snippet you can see line 12 which highlighted. So its make developer easy to point out main codes.

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. You do not need to escape HTML entities or anything, just post your code as-is. The plugin will handle the rest. Just wrap your code in [language], such as [php]code here[/php] or [css]code here[/css]. All widely used languages are supported.

3. Crayon Syntax Highlighter

Crayon Syntax Highlighter

Crayon Syntax Highlighter

One of the best plugin with lots of features and different themes to highlight your codes with different styles and color you can add your own color to highlight codes. Crayon supports most of the languages and url to highlight even it support mixed languages to show.crayon plugin supports bbPress 2, Include many features like :

  • Toggled plain code
  • Toggled line numbers
  • Copy/paste code
  • Open code in a new window (pop up)
  • Line wrapping
  • Code expanding
  • Minimizing

4. WP-Syntax

WP-Syntax provides clean syntax highlighting for embedding source code within pages or posts, using GeSHi — supporting a wide range of popular languages. 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.

5. 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.

6. WP Code Highlight Plugin

WP Code Highlight provides syntax highlighting of source code snippets and it is W3C valid. Wrap code blocks with <pre> and </pre> It provides a code button(HTML editor) to help you insert code in articles easily. You don’t need to specify the language since WP Code Highlight will guess, all languages are supported. You can put line numbers in your code if you need. There are 4 highlight themes, you can choose from them or display by random. It can also load wp-code-highlight.css from current wordpress theme directory. It can delete its own options, so it is also a green plugin !

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 93271 registered users and 55182 snippets (March 16, 2014). 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.

Leave a Reply

1 Comment on "How to Embed Code Snippets into WordPress Posts ?"

avatar
  Subscribe  
Notify of
Kapil Garg
Guest

Ahaa, its nice discussion about this post at this place at this webpage, I have read all that, so now me also commenting at this place.