如何實現像代碼'嵌入'和'原始'功能的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縮短代碼的，但是這是想法。