如何实现像代码'嵌入'和'原始'功能的github？

Question

我真的很喜欢github的代码框的功能，特别是'嵌入'和'原始'功能。我很好奇如何实现这样的代码框（不是代码突出显示，只是'嵌入'和'原”功能）

example

你有没有看到每任何插件或其他一些事情可以做了吗？

谢谢。

Answer 1

这里是他们是如何做到这一点：他们有他们的服务器上的原始文件，所以当你点击生的，它只是执行下面的脚本

window.open('whateverrawcode.rb'); 

的“嵌入”功能，他们做的是他们再次拥有代码，并且在服务器上，他们将代码转换为html，并添加了用于语法突出显示的类。在他们给你的脚本中，正好是document.write到样式表的链接，然后document.write出HTML。我已经采取了看剧本的Ruby代码，那就是：

document.write('<link rel="stylesheet" href="https://gist.github.com/stylesheets/gist/embed.css"/>') 

document.write('<div id=\"gist-984320\" class=\"gist\">\n \n \n \n  \n  \n\n  <div class=\"gist-file\">\n   <div class=\"gist-data gist-syntax\">\n   \n   \n   \n    <div class=\"gist-highlight\"><pre><div class=\'line\' id=\'LC1\'><span class=\"nb\">require<\/span> <span class=\"no\">File<\/span><span class=\"o\">.<\/span><span class=\"n\">expand_path<\/span><span class=\"p\">(<\/span><span class=\"s1\">&#39;../config/application&#39;<\/span><span class=\"p\">,<\/span> <span class=\"bp\">__FILE__<\/span><span class=\"p\">)<\/span><\/div><div class=\'line\' id=\'LC2\'><span class=\"nb\">require<\/span> <span class=\"s1\">&#39;rake&#39;<\/span><\/div><div  class=\'line\' id=\'LC3\'> and more HTML') 

我删了很多HTML缩短代码的，但是这是想法。