Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save thorstensiefert/9d8a972f9cb999bfd527 to your computer and use it in GitHub Desktop.
Save thorstensiefert/9d8a972f9cb999bfd527 to your computer and use it in GitHub Desktop.
<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>
//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();
});
#editor {
width: 100%;
height: 500px;
resize: none;
}
#preview {
width: 100%;
height: 500px;
resize: none;
overflow-y: scroll;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment