jquery logo

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 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
Javascript code
  1. <script type="text/javascript">
  2. jQuery(document).ready(function() {
  3.   jQuery(".code").each(function() {
  4.     var block = jQuery(this);
  5.     var htmlText = block.html();
  6.     var plainText = "";
  7.     if (jQuery.browser.msie) {
  8.       plainText = htmlText.replace(/\n/g, "+");
  9.       plainText = jQuery(plainText).text().replace(/\+\+/g, "\r");
  10.     } else {
  11.       plainText = block.text().replace(/code/g, "code\n");
  12.     }
  13.     var state = 1;
  14.     block.prev().click(function() {
  15.       if (state) {
  16.         jQuery(this).html("Show Highlighted Code");
  17.         block.text(plainText).wrapInner("<pre class=\"plain-text\"></pre>");
  18.         state = 0;
  19.       } else {
  20.         jQuery(this).html("Show Plain Text");
  21.         block.html(htmlText);
  22.         state = 1;
  23.       }
  24.     });
  25.   });
  26. });
  27. </script>

I have tested the code under IE6, IE7, and FF3 so far.

Filed under: Cakephp, Javascript  Tags: Jquery

1 Responses to “Geshi code to plain text JQuery javascript toggle”

nice - I hope to retain this for near future use

Sorry, comments have been closed for this post.
(default) 11 queries took 3 ms
NrQueryErrorAffectedNum. rowsTook (ms)
1DESCRIBE `posts`17171
2DESCRIBE `comments`11111
3DESCRIBE `tags`221
4DESCRIBE `categories`220
5DESCRIBE `posts_tags`220
6DESCRIBE `categories_posts`220
7SELECT `Post`.`id`, `Post`.`url`, `Post`.`title`, `Post`.`icon`, `Post`.`metadesc`, `Post`.`metakeys`, `Post`.`categories`, `Post`.`tease`, `Post`.`body`, `Post`.`private_body`, `Post`.`created`, `Post`.`modified`, `Post`.`status`, `Post`.`allow_comments`, `Post`.`tags`, `Post`.`hitcount`, `Post`.`hitcount_rss` FROM `posts` AS `Post` WHERE `Post`.`url` = 'geshi-code-to-plain-text-jquery-javascript-toggle' LIMIT 1110
8SELECT `Comment`.`id`, `Comment`.`post_id`, `Comment`.`body`, `Comment`.`author`, `Comment`.`url`, `Comment`.`email`, `Comment`.`ip`, `Comment`.`status`, `Comment`.`junk_score`, `Comment`.`created`, `Comment`.`modified` FROM `comments` AS `Comment` WHERE `Comment`.`status` = 2 AND `Comment`.`post_id` = (64) 110
9SELECT `Tag`.`id`, `Tag`.`tag`, `PostsTag`.`post_id`, `PostsTag`.`tag_id` FROM `tags` AS `Tag` JOIN `posts_tags` AS `PostsTag` ON (`PostsTag`.`post_id` = 64 AND `PostsTag`.`tag_id` = `Tag`.`id`) 110
10SELECT `Category`.`id`, `Category`.`category`, `CategoriesPost`.`post_id`, `CategoriesPost`.`category_id` FROM `categories` AS `Category` JOIN `categories_posts` AS `CategoriesPost` ON (`CategoriesPost`.`post_id` = 64 AND `CategoriesPost`.`category_id` = `Category`.`id`) 220
11UPDATE `posts` AS `Post` SET `Post`.`hitcount` = Post.hitcount + 1 WHERE `Post`.`id` = 6410