How to toggle between prettified text and raw text

[Ciaran Farrell]

I'm sure that there must be an easy answer to this, but maybe there isn't. I have a <pre id="bar" class="prettyprinter" wrap></pre> into which I dynamically load the contents of a source code file. It seems to work as the contents are displayed with line numbering and styling.

However, how should I best add a button/link at the top of the page that allows the user to toggle between prettified and raw versions of the content? Someting like a href with id (e.g. foo) doesn't work:

$('#foo').live('click',function(){

  $('#bar').removeClass('prettyprinter');
});

[Mike Samuel]

On Mar 12, 10:16 am, Ciaran Farrell <cfarrell1...@googlemail.com>
wrote:

"prettyprinter" is not a class used by prettify.js. Maybe removing
"prettyprint" and changing the styles in your copy of prettify.css
from

.str { color: #080 } /* string content */
.kwd { color: #008 } /* a keyword */
.com { color: #800 } /* a comment */
.typ { color: #606 } /* a type name */
...

to

.prettyprint .str { color: #080 } /* string content */
.prettyprint .kwd { color: #008 } /* a keyword */
.prettyprint .com { color: #800 } /* a comment */
.prettyprint .typ { color: #606 } /* a type name */
...

so that they only have an effect when the prettyprint class is present
on a container.

[Nathan Ziarek]

Without knowing how you're loading the source, the quickest option might be to just load it twice (or copy the containing element before applying pretty print)

<div id="source-original" style="display:none"><SOURCE></div>

<div id="source-pretty" class="prettyprint"><SOURCE></div>

Then, when you click your button, just toggle between showing and not showing the DIVs.

nz

--
You received this message because you are subscribed to the Google Groups "js-code-prettifier" group.
To view this discussion on the web visit https://groups.google.com/d/msg/js-code-prettifier/-/UlOWFP_YgboJ.
To post to this group, send email to js-code-p...@googlegroups.com.
To unsubscribe from this group, send email to js-code-prettif...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/js-code-prettifier?hl=en.

[Mike Samuel]

2012/3/30 Nathan Ziarek <nzi...@gmail.com>:

> Without knowing how you're loading the source, the quickest option might be
> to just load it twice (or copy the containing element before applying pretty
> print)
>
> <div id="source-original" style="display:none"><SOURCE></div>
> <div id="source-pretty" class="prettyprint"><SOURCE></div>

Prettprint was written before any browser had an efficient
getElementsByClassName and still has to support browsers that don't so
the default entry point looks for <pre>, <code>, and <xmp> elements
only. <div class="prettyprint"> will not be found by prettyPrint().