Question

I really love the function on the github’s code box, especially the ’embed’ and ‘raw’ function.I am curious about how to implement a code box like that.(Not the code highlight,just the ’embed’ and ‘raw’ function)

example

Have you every seen any plugins or some other thing can make that?

Thank you.

Answer 1

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\">&#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')

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