当前位置：文江博客话题详情

如何实现类似 github 的代码“嵌入”和“原始”功能？

发布于 2024-11-09 06:14:51 字数 204 浏览 0 评论 0原文

我真的很喜欢github代码盒上的功能，尤其是“embed”和“raw”功能。我很好奇如何实现这样的代码盒。（不是代码突出显示，只是“embed”和“raw”函数）

示例

您是否见过任何插件或其他东西可以做到这一点？

谢谢。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

递刀给你 2024-11-16 06:14:51

他们是这样做的：他们的服务器上有原始文件，因此当您单击原始文件时，它只会执行以下脚本

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\">'../config/application'<\/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\">'rake'<\/span><\/div><div     class=\'line\' id=\'LC3\'>  and more HTML')

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

Here is how they do it: they have the raw file on their server, so when you click raw, it just executes the following script

window.open('whateverrawcode.rb');

For the 'embed' functionality, what they do is they have the code again, and on the server, they convert the code to html with classes added for syntax highlighting. In the script that they give you, the just document.write out the link to the stylesheet and then document.write out the HTML. I have taken a look at the script for the ruby code, here it is:

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\">'../config/application'<\/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\">'rake'<\/span><\/div><div     class=\'line\' id=\'LC3\'>  and more HTML')

I deleted a lot of the HTML to shorten the code, but that's the idea.

回复收藏 0 原文

~没有更多了~