9. August 2010 

Gists in WordPress einbinden

Screenshot eines GistsBei meiner Suche nach Syntax-Highlighting Plugins für WordPress habe ich mir überlegt, dass man auch gleich Gists in WordPress einbinden könnte, um sich so ein wenig Arbeit beim Teilen von Codesnippets ersparen zu können. Bisher gibt es zu diesem Zweck zwei Plugins, die allerdings beide nicht optimal arbeiten. Eine kurze Google-Suche führte mich zu Arin Sarkissians Blog, der eine kleine Anpassung an Paul Williams Plugin vorgenommen hat.

Mit dieser Änderung wird der Inhalt des Gists direkt in das HTML des Artikels eingebunden. So ist es nicht länger notwendig, dass der Benutzer JavaScript aktiviert hat, um den Code anzeigen zu können. Ein weiterer Effekt hiervon ist, dass auch Suchmaschinen den Inhalt durchsuchen können.

Die Installation des Plugins läuft wie gewohnt: Gistson.php in das Plugins-Verzeichnis von WordPress verschieben und im Admin-Bereich aktivieren. Zuletzt muss noch eine CSS Datei eingebunden werden und schon kann das fröhliche Einbetten von Gists beginnen.

Und hier der Gist der den Quellcode zum Plugin beinhaltet:

<?php
/*
Plugin Name: Gistson - Embedded Gist WP Plugin
Plugin URI: http://arin.me/blog/tag/gistson
Description: Use a shortcode [gist id="12345"] to embed A Gist from http://gist.github.com into your blog
Version: 0.1
Author: Arin Sarkissian
Author URI: http://arin.me

Copyright 2009 Arin Sarkissian

This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
*/

/*
CREDIT:
    Heavily based on Paul William's plugin:
        http://www.entropytheblog.com/blog/    
        http://www.entropytheblog.com/blog/2008/12/wordpress-github-gist-shortcode-plugin/
        
    Main difference is that this version doesn't do a JS, <script>, embed... the code from your gist is
    actually in the HTML source.

INSTALL:
    Toss the gistson.php file into your blogs wp-content/plugins folder. Login to WP and enable the plugin.

USE:
    Put this <LINK> tag in <HEAD> of header.php
        <link rel="stylesheet" href="http://gist.github.com/stylesheets/gist/embed.css"/>
    
    When you wanna embed a gist just type in:
        [gist id="gist-id-from-gist.github.com-here"]        
        example:
        [gist id="250709"]
        
    You can exclude the attribution by doing this:        
        [gist id="250709" nometa="true"]    
        
        This is useful for when you have multiple gists. But for big chunks of code etc
        I'd encourge you to keep the attribution cuz those guys have a business to run
*/    

function gist_shortcode_func($atts, $content = null) {
	$url   = 'http://gist.github.com/' . trim($atts['id']) . '.json';
	$json  = file_get_contents($url);
	$assoc = json_decode($json, true);

	if (isset($atts['nometa'])) {
        // you'll end up with 2 1px borders at the bottom =(
	   $assoc['div'] = preg_replace('/<div class="gist\-meta">.*?(<\/div>)/is', '', $assoc['div']);
	}

	return $assoc['div'];

}
add_shortcode('gist', 'gist_shortcode_func');

?>
view raw Gistson.php This Gist brought to you by GitHub.

More from this category

No comments yet.

Leave a Reply