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

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

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