triptych/bespin_embed.html

## bespin_embed.html

<!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','https://bespin.mozillalabs.com/bookmarklet/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>

    <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>

	<!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','https://bespin.mozillalabs.com/bookmarklet/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>

	<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>