为代码片段添加“添加到”Coda 和 TextMate 按钮

我认为这是自从坎耶在头上刻上邪教符号以来最酷的事情：代码片段区域 中的每个代码片段现在在您将鼠标悬停在其上时都会显示小链接，用于将代码片段添加到 Coda 或 TextMate。我意识到这非常特定于 Mac，但如果您使用这些程序中的任何一个，这将非常酷。我希望制作一个复制到剪贴板的功能，这对任何人都很有用。[示例]

Coda 按钮的工作原理

这个比较容易，因为 Coda 支持一种特殊的 URL 结构（不确定该怎么称呼它），网页上的锚链接实际上可以将剪辑添加到 Coda（假设您已安装）。这是结构（链接的 href）

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

我不想做的是不得不将所有这些手动写入每个代码片段中。这需要大量重复的工作。我们将依靠 jQuery 为我们完成所有这些神奇操作。计划

1. 查找每个代码块
2. 查找标题和实际代码内容
3. 将特殊格式的 Coda 链接附加到代码块
4. 在将鼠标悬停在代码片段上时使其淡入

$(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");

});

图片/CSS

这些图片只是我在 Photoshop 中制作的按钮，当然是用精灵图，用于悬停效果。

在 CSS 中，按钮绝对定位在代码片段的右下角，并且隐藏（JavaScript 将取消隐藏它们，对于不使用 JS 的用户，最好隐藏起来）。

.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; 
}

TextMate 按钮的工作原理

这个复杂得多。您无法创建 URL 链接来创建 TextMate 代码片段。相反，TextMate 使用特殊格式的 XML 文件来添加代码片段。因此，为了使它正常工作，我们必须在有人需要时动态创建这些文件。

我与 David Walsh 分享了 这些文件的结构，我们曾在 HTML-Ipsum 上使用过一次。David 从那里接手，并为动态创建这些文件构建了一个非常非常酷的系统，包括缓存。

我将 defer 给 David，了解 如何执行此操作的教程。