Question

我非常喜欢github代码框中的函数，尤其是'embed'和'raw'函数。我很好奇如何实现这样的代码框。（不是代码突出显示，只是'嵌入'和'原始'功能）

你们每个人都看过任何插件或其他东西可以做到吗？

谢谢。

Answer 1

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

window.open('whateverrawcode.rb');

对于'embed'功能，他们所做的是他们再次拥有代码，并且在服务器上，他们将代码转换为html，并添加了用于语法高亮的类。在他们给你的脚本中，just document.write出了样式表的链接，然后document.write out 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来缩短代码，但这就是想法。

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

1 个答案: