Blog, PHP, WordPress, WordPress Shortcode

Embed Snipplr Snippets with WordPress Shortcode

Unlike the pastie-style of sharing snippets of code, Snipplr is more of a code repository, or code library, that serves primarily as a resource for collating your own collection of snippets. The Snipplr website says that "... 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".

Edit (February 2018): Snipplr does not use secure embeds, and their embed code is highly unreliable. We would not encourage and do not support the use of Snipplr embeds. Some of the code on this page may not render.

Edit (November 2020): We've removed some of the example on this page. They'll be returned shortly with updated code.

With around 60,000 snippets added to their site since 2006 (comparatively small compared to other similar websites), and around 215000 users, it's not the most popular website... but it can be a good resource. Sadly, with the proliferation of other excellent services, Snipplr is becoming less and less relevant.

The code on this page will simply embed Snipplr code into a WordPress post of page with shortcode. The primary purpose of this quick article isn't to demonstrate Snipplr embeds but rather illustrate how the highlight code we talked about here might be used to embed code from any website (not just Snipplr).

The default output of the Snipplr embed code is crappy. Snipplr uses GeSHi (Generic Syntax Highlighter) by default and the library hasn't seen an updated in years. The embed code returns a block of code that doesn't support line wrapping, there's a visually unappealing h3 heading, and there's no stylistic integration with your website.

1. Default Snipplr WordPress Shortcode

An example snippet using our generic shortcode is rendered below. The shortcode of [snipplrr id="29888"] returns:

■ ■ ■

~~Example removed.~~

The rendering shown above is quite basic and not very sensible but it does enhance the basic Snipplr snippet. However, it's hardly suitable.

<?php

Embed Snipplr Snippets with PHP or WordPress Shortcode

http://www.beliefmedia.com/snipplr-php-wordpress-shortcode

function beliefmedia_snipplr_default($atts) {

extract(shortcode_atts(array(

'id' => '29888'

), $atts));

/* If a URL we'll snatch the ID */

if (strripos($id,'http') !== false) {

$pattern = '/http\:\/\/(www.)?snipplr\.com\/view\/([0-9]{1,8})\/?([a-zA-Z0-9-]+)*\/?/i';

preg_match($pattern, $id, $matches);

$id = $matches['2'];

}

return '<div id="snipplr_embed_' . $id . '" class="snipplr_embed"><script type="text/javascript" src="http://snipplr.com/js/embed.js"></script><script type="text/javascript" src="http://snipplr.com/json/' . $id . '"></script></div>';

}

add_shortcode('snipplrr','beliefmedia_snipplr_default');

2. Simple PHP Syntax Highlighter

The basic beliefmedia_simple_php_highlighter() from this page was provided some time back for demonstration purposes only. It returns formatted PHP code but doesn't play well on mobile devices. While it line wraps, it doesn't preserve formatting. The shortcode of [snipplr id="29888"] (where 29888 is the Snipplr snippet ID) returns the following:

~~Example removed.~~

If you're on a mobile it's likely you aren't looking at anything pretty!

3. BeliefMedia CSS Syntax Highlighter

The third method is our preferred means of showing Snipplr (and some other repository) snippets. In this case we've used [snipplr id="29888"] which returns the following:

<?php

function getYoutubeVideoID($sVideoURL) {

$sVideoID = preg_replace('%.*(v=|/v/)(.+?)(/|&|\\?).*%', '$2', $sVideoURL);

return $sVideoID;

}

Our function retrieves the Snipplr code, modifies the output, applies the syntax, and caches the result. It supports line wrapping and all the other features of the function described on this page.

Considerations

As stated, while Snipplr was used the purpose of the demo, the function could essentially support any PHP code repository website, mitigating the issues associated with an output that doesn't fit with the theme of your website. Of course, you could simply copy and paste code in your preferred highlighter tool, but the automation aspects simply improve upon your workflow.