Bootstrap Showdown Editor

Bootstrap-Showdown-Editor.markdown

Bootstrap Showdown Editor

Twitter bootstrap Markdown Editor

A Pen by Justin Cron on CodePen.

License.

index.html

<div class="container">

	<div class="row">
	  <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
	  	<h2>Editor</h2>
	    <textarea name="" id="editor" class="well">
Using this tool
---------------

This page lets you create HTML by entering text in a simple format that's easy to read and write.

  - Type Markdown text in the left window
  - See the HTML in the right

Markdown is a lightweight markup language based on the formatting conventions that people naturally use in email.  As [John Gruber] writes on the [Markdown site] [1]:

> The overriding design goal for Markdown's
> formatting syntax is to make it as readable
> as possible. The idea is that a
> Markdown-formatted document should be
> publishable as-is, as plain text, without
> looking like it's been marked up with tags
> or formatting instructions.

This document is written in Markdown; you can see the plain-text version on the left.  To get a feel for Markdown's syntax, type some text into the left window and watch the results in the right.  You can see a Markdown syntax guide by switching the right-hand window from *Preview* to *Syntax Guide*.

Showdown is a Javascript port of Markdown.  You can get the full [source code] by clicking on the version number at the bottom of the page.

**Start with a [blank page] or edit this document in the left window.**

  [john gruber]: http://daringfireball.net/
  [1]: http://daringfireball.net/projects/markdown/
  [source code]: http://www.attacklab.net/showdown-v0.9.zip
  [blank page]: ?blank=1 "Clear all text"


## Syntax highlighting

When combined with [highlight.js][] this starts looking as a kind of IDE :-)

HTML:

    <h1>HTML code</h1>
    <p class="some">This is an example</p>

Python:

    def func():
      for i in [1, 2, 3]:
        print "%s" % i


[highlight.js]: http://softwaremaniacs.org/soft/highlight/en/


	    </textarea>
	  </div>
	  <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
	  	<h2>Preview</h2>
	    <div id="preview" class="alert alert-warning"></div>
	  </div>
	</div>

</div>

script.js

//create the showdown object
	var markdown = new Showdown.converter();

	var editor = $("#editor");
	var preview = $("#preview");

	function updatePreview(){
	  preview.html(markdown.makeHtml(editor.val()));
	}

	updatePreview();

	editor.on('keyup', function(){
	 updatePreview();
	});

style.css

#editor {
  width: 100%;
  height: 500px;
  resize: none;
}

#preview {
  width: 100%;
  height: 500px;
  resize: none;
  overflow-y: scroll;