How to add "view:source" option in a textbox?

Question

I know my title isn't that descriptive so let me try to explain it here.

In my blog I want to add an option for user that when he clicks a small button named view:source he gets the the source code in raw format. I am using prettify.js for syntax highlighting and it automatically creates a textbox around my source code with the below defined css:

pre.prettyprint { 
    border-style: groove; 
    border-radius: 10px; 
    padding: 10px; 
    overflow: auto;
    font-family: "DejaVu Sans Mono";
    font-size: 12px;
    background-color: #EBECE4
}

Now, in that text-box like structure I just want to add an option/button to view the source in raw format. The feature am talking about can be seen in this dzone post.

what's the point of using a syntax highlighting plugin if you're going to make the users open a popup window anyways? — jbabey, Oct 14 '12 at 12:53
@jbabey: I actually wanted to provide an option so that user can copy the source code on `clipboard` but I read that this feature has a `flash` dependancy. So, I thought why not pop-up a window with source code in `raw-format` and user can just do `Ctrl-A/C` to copy it. — RanRag, Oct 14 '12 at 12:58
@A.M.K: Till now I am only using `html and css`. So, no fancy stuff other than prettify.js. — RanRag, Oct 14 '12 at 13:06
@Noob good syntax highlighter plugins support copy/paste just fine, you don't need to open a popup window. — jbabey, Oct 14 '12 at 14:15
@jbabey: The problem is `prettify` doesn't and yes I agree that highlighter like `syntax-highlighter` works good for copy/paste. — RanRag, Oct 14 '12 at 14:33

score 2 · Answer 1 · answered Oct 14 '12 at 14:02

What about something like this, obviously changing it from a button, having better positioning and element targeting and using an actual version of prettify.js instead of just the output:

Demo: http://jsfiddle.net/SO_AMK/9YXxP/

JavaScript:

var code = document.getElementsByTagName("pre")[0].innerText;

var elm = document.getElementById("clickmeforpopup");

elm.onclick = function() {
    popup = window.open("", "popup");
    popup.document.body.innerText = code;
};

+1 This is a good solution but with a small problem. For languages like python it will loose all its formatting/indentation. — RanRag, Oct 14 '12 at 14:31

score 1 · Answer 2 · answered Oct 14 '12 at 12:59

You might want to consider another library that supports that functionality rather than implementing it yourself. In this article you can find syntax hightlighters that show raw code like SyntaxHighlighter or beautyOfCode

http://www.webdesignbooth.com/9-useful-javascript-syntax-highlighting-scripts/

How to add "view:source" option in a textbox?

2 Answers2