Treehouse: Grow your CSS skills. Land your dream job.

Last updated on:

Detect Gists and Embed Them

Just post a link to a GitHub Gist and it will be nicely embedded. Or use the format this snippet provides and create the shortcode yourself. For your functions.php file:

<?php
// 
function gist_shortcode($atts) {
  return sprintf(
    '<script src="https://gist.github.com/%s.js%s"></script>', 
    $atts['id'], 
    $atts['file'] ? '?file=' . $atts['file'] : ''
  );
} add_shortcode('gist','gist_shortcode');

// Remove this function if you don't want autoreplace gist links to shortcodes
function gist_shortcode_filter($content) {
  return preg_replace('/https:\/\/gist.github.com\/([\d]+)[\.js\?]*[\#]*file[=|_]+([\w\.]+)(?![^<]*<\/a>)/i', '', $content );
} add_filter( 'the_content', 'gist_shortcode_filter', 9);
?>

Any of these formats will work:

  • https://gist.github.com/1147076
  • https://gist.github.com/1147076#file_annotated.js
  • https://gist.github.com/1147076.js?file=annotated.js

Reference URL

Comments

  1. Grawl
    Permalink to comment#

    It’s PHP. What about flying JS?

    • Nathan Shubert
      Permalink to comment#

      I’m into this approach. I prefer to do any of my content stuff with php and use js for “making it fancy and rad” factor.

  2. Hamed Ghaderi
    Permalink to comment#

    I used it in my functions.php in wordpress but it doesn’t work.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```