WebmasterWorld code formatting bookmarklet

Hi, I just thought I'd share a bookmarklet I wrote to make code I post to webmasterworld a litter clearer.

Currently, wrapping code in "code" tags results in something like this:


<!doctype html>
<html lang='en'>
 <head>
  <meta charset='utf-8'>
  <title>example page</title>
  <style type='text/css'>
   *  {margin:0; padding:0;}
   body {font:13px/1.231 arial,sans-serif;}
   p  {margin:10px 0;}
  </style>
 </head>
 <body>
  <p>Hello world.</p>
 </body>
</html>

By adding a few other tags and careful spacing, you can get this:

<!doctype html>
<html lang='en'>
  <head>
    <meta charset='utf-8'>
    <title>example page</title>
    <style type='text/css'>
      *    {margin:0; padding:0;}
      body {font:13px/1.231 arial,sans-serif;}
      p    {margin:10px 0;}
    </style>
  </head>
  <body>
    <p>Hello world.</p>
  </body>
</html>

This bookmarklet makes that transformation automatically. Just:

Type your post, surrounding code with "code" tags.
Click the bookmarklet.
Submit.

Note that webmasterworld deletes some of the spacing, so if you want to edit your post you'll have to use the text you submitted, not the text that appears when you click "edit".

Here's the bookmarklet; be sure to delete the space in "[/co de]" before using.

javascript:(function(e){(e&&e.tagName=='TEXTAREA')?e.value=e.value.replace(/\[code\]\s*((.|\s)*?)\s*\[\/code\]\r?\n?/g,function(m,c){return'[quote][pre][code]'+c.replace(/( {2,})/g,'$1$1')+'[/co de][/pre][/quote]'}):alert('Error: document structure is not recognized.')})(document.getElementsByName('post_content')[0]);

If you encounter any bugs, or want me to add something, please say so and I'll see what I can do.

WebmasterWorld code formatting bookmarklet

Skier88

engine

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week