Geshi code to plain text JQuery javascript toggle
I was about to update my somewhat limited Geshi helper to handle more code types and to sort out the added character errors when pasting a copied code block when I stumbled upon Mark Story's Geshi Helper and took a look.
Marks code was super simple to install and setup, the only problem I struck was the HTML code type in the latest Geshi version 1.0.8.1 wasn't defined so I just copied html4strict.php to html.php and it was away laughing. Mark has made it very easy to extend the code types and has even put together some nice style sheets.
The next thing to sort out on my list was the extra character errors being output when pasting a code block, I noticed in the Geshi docs that there is a new option GESHI_HEADER_PRE_TABLE, well new to me since I last looked anyway. I gave that a crack first but found it still lost formatting when pasting a code block. Mark has also provided a MooTools javascript example but since I had just started using JQuery I converted the code as best I could. It took a little bit of hacking around as IE wouldn't play nice (like normal), anyway here's what I came up with for my JQuery code if anyones interested :-
Show Plain Text- <script type="text/javascript">
- jQuery(document).ready(function() {
- jQuery(".code").each(function() {
- var block = jQuery(this);
- var htmlText = block.html();
- var plainText = "";
- if (jQuery.browser.msie) {
- plainText = htmlText.replace(/\n/g, "+");
- plainText = jQuery(plainText).text().replace(/\+\+/g, "\r");
- } else {
- plainText = block.text().replace(/code/g, "code\n");
- }
- var state = 1;
- block.prev().click(function() {
- if (state) {
- jQuery(this).html("Show Highlighted Code");
- block.text(plainText).wrapInner("<pre class=\"plain-text\"></pre>");
- state = 0;
- } else {
- jQuery(this).html("Show Plain Text");
- block.html(htmlText);
- state = 1;
- }
- });
- });
- });
- </script>
I have tested the code under IE6, IE7, and FF3 so far.
nice - I hope to retain this for near future use