browser/bookmarklet/index.html
author Patrick Walton <pwalton@mozilla.com>
Wed, 29 Sep 2010 16:17:05 -0700
changeset 2052 24cebc9a07d5c66eeb6008573e41eafbcdcb2459
parent 2003 3c668df1bfaa813288e794dc4f8c9a9874009e6b
permissions -rw-r--r--
Bug 572115 - Introduce a "specialmodules" setting, which will cause modules that match that regex to be highlighted in a different color

<!DOCTYPE html>

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Bespin Bookmarklet</title>
    <link href="page.css" rel="stylesheet" type="text/css" media="screen">
  </head>
  <body>
    <h1>Bespin Bookmarklet</h1>
    <h2>Code in any cloud</h2>
    <p>Using the Bespin Bookmarklet, you can replace any textarea you encounter with a Bespin editor – making editing much more pleasant. Here's how to use it:</p>
    <ol start="0">
      <li><p>Use a recent Firefox, Chrome or Safari</p></li>
      <li><p style="height: 209px; position: relative; top: 125px"><a href="javascript:(function(){var elem=document.createElement('script');elem.setAttribute('src','http://localhost:8080/bookmarklet.js');document.body.appendChild(elem);})()">Bespin</a></p><p style="position: relative; top: -234px; left: 55px; height: 0"><img src="DragToBar.png"></p>
        <p>(you only have to do that once! we'll keep you up to date.)</p>
      </li>
      <li>
        <p>Visit a site that you wish had a better editor<sup>1</sup></p>
      </li>
      <li>
        <p>Click the bookmarklet</p>
      </li>
      <li>
        <p>Now, when you move the mouse over a textarea, you'll see a Bespin logo appear on the right side.</p>
        <p><img src="GistWithBespin.png"></p>
      </li>
      <li><p>Click the logo and the textarea is replaced with a shiny, new Bespin</p>
        <p><img src="GistBespinEditor.png"></p>
      </li>
    </ol>
    
    <h2>Try it now!</h2>
    
    <p>Is the bookmarklet comfortably set in your bookmarks bar? Try it out on the textarea below:</p>
    
    <div><textarea style="width: 500px; height: 500px">Edit me!</textarea></div>
    
    <h3>footnotes</h3>
    <p><super>1</super> You might want to tell them about Bespin Embedded, which allows them to easily configure and customize Bespin for direct use on their site.</p>
  </body>
</html>