Giving Snippets “Add to” Coda & TextMate Buttons

Avatar of Chris Coyier
Chris Coyier on

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

I think this is the coolest thing since Kayne carved cult symbols onto his head: each snippet in the Snippets area now has little links when you roll over them for adding the snippet to Coda or TextMate. I realize this is way Mac-specific, but if you roll that way and use either of these programs it’s way cool. I hope to make a copy-to-clipboard function that will be useful for anybody. [example]

How the Coda Button Works

This was the easier of the two, because Coda supports a special URL structure thingy (not sure what to call it), where literally an anchor link on a web page can add a clip to Coda (assuming you have it installed). This is the structure (href of link):

codaclips://<<**Title:Title%20of%20Snippet**>>.code-goes-here{%20margin:0;%20}

What I didn’t want to do was have to hand-write all that into every single snippet. That’s a heck of a lot of duplicated effort. We’ll rely on jQuery to do all that magic for us. The plan:

  1. Find every block of code
  2. Find the title and actual code content
  3. Append a special Coda-formatted link to the block
  4. Have it fade in when the snippet is rolled over
$(function() {

    var $title = $("#snippet-header").text();

    $(".entry pre").each(function() {
    
        var $preblock = $(this);
        var $codeblock = $preblock.find("code");
        var $snippet = "codaclips://<<**Title:" + $title + "**>>" + encodeURIComponent($codeblock.text());
        
        $("<a class='coda-clip'>Add Coda Clip</a>").attr("href",$snippet).appendTo($preblock);
        
        $preblock.hover(function() {
            $preblock.find(".coda-clip").stop().fadeTo(300, 1.0);
        }, function() {
            $preblock.find(".coda-clip").stop().fadeTo(300, 0);
        });
        
    });
    
    $(".coda-clip").show().css("opacity","0");

});

Images / CSS

The images are just buttons I put together in Photoshop, sprites of course, for the rollover effect.

In the CSS, the button is absolutely positioned to the bottom right of the snippet, and hidden (the JavaScript will unhide them, might as well be hidden for JS-off people).

.entry .coda-clip { 
   display: none; 
   position: absolute; 
   bottom: 15px; 
   right: 0; 
   width: 80px; 
   height: 30px; 
   background: url(../images/coda.png) no-repeat; 
   text-indent: -9999px; 
}
.entry a.coda-clip:hover { 
    background-position: 0 -30px; 
}

How the TextMate Button Works

This one is far more complicated. There is no URL link you can create to make a TextMate snippet. Instead, TextMate uses specially formatted XML files to add snippets. So in order to make this work, we are going to have to create those files on the fly when someone wants one.

I shared with David Walsh the structure of these files that we used one time on HTML-Ipsum. David took it from there and rocked out a really really cool system for creating these files on the fly, complete with caching.

I’m gonna defer to David for his tutorial on how to do this.