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
// [gist id="ID" file="FILE"]
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', '[gist id="${1}" file="${2}"]', $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
  • [gist id=1147076]
  • [gist id=1147076 file=annotated.js]

Reference URL

Comments

  1. Permalink to comment#

    It’s PHP. What about flying JS?

    • 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

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".