Embed a Snippi on a WordPress Blog


I recently came across Snippi a little site built by Orman Clark of ThemeZilla.  I have always hated the way my code examples look on my site and also most of the code samples on all the blogs out there, so when I saw this site I knew that is what I wanted my code samples to look like.

I whipped up a WordPress plugin that adds a [ snippi ] shortcode you can include in your blogs. It uses the transient API (caching) to keep your site loading fast.

Using the shortcode

[ snippi id="c0c8lz3" ]

[snippi id="c0c8lz3"]

[ snippi id="c0c8lz3" type="raw" ]

[snippi id="c0c8lz3" type="raw"]

Filters and Actions

There are a couple filters and actions for you to play with before the code gets displayed on the page:

do_action( 'snippi_before_html', $id );
$embed .= apply_filters( 'snippi_html', $code );
do_action( 'snippi_after_html', $id );

CSS Structure

If you want to modify the CSS of the snippi, here is what the output looks like:

<div id=”snippi-c0c8lz3″ class=”snippi snippi pretty”>
<div class=”snippi-item”>
<div class=”code-wrapper”>
<div class=”notepad”>
<div class=”snippi_powered_by”>Powered by <a href=”http://snippi.com/s/c0c8lz3″>Snippi</a></div>