# Markdown Inline Editor
**A new lightweight approach of editing markdown text with the preview and the editing area combined.**
The text you are reading at this moment can be edited. Just click at the text you want to edit and you will see the way it does look and feel.
Do not search for special keyboard shortcuts. Think as you would edit plain text.
Just use the cursor keys to move between the blocks.
And to merge **block 1** and **block 2**, press `del` at the end of **block 1** or `backspace` at the beginning of **block 2**.
You would do the same in a plain text or markdown document.
## Keyboard Shortcuts
|Shortcut|Description|
|-|-|
|`Esc`|Stop editing|
## Usage
Get the code here:
<https://github.com/McSodbrenner/markdown-inline-editor>
First we need a library that renders the markdown. We are using [marked](https://github.com/chjj/marked) here:
```
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script>
```
Then we have to include the markdown-inline-editor and create an instance of it:
```
<script src="src/editor.js"></script>
<script>
// 'view' is the element we want to render the editor into
var view = document.querySelector('.markdown');
// 'content' is the markdown text we want to edit
var content = view.textContent;
// The third parameter is a callback that has to render a given markdown text
var editor = new Editor(content, view, function(markdown) {
return marked(markdown);
});
</script>
```
## API
If you init the editor you get the API back:
```
var editor = new Editor(content, view, ...
```
|Method|Description
|-|-
|`editor.getMarkdown()`|Returns the complete raw markdown text. Useful, if you want to save the text after editing. :)
# Markdown test suite
This note demonstrates some of what [Markdown][1] is capable of doing.
*Note: Feel free to play with this page. Unlike regular notes, this doesn't automatically save itself.*
## Basic formatting
Paragraphs can be written like so. A paragraph is the basic block of Markdown. A paragraph is what text will turn into when there is no reason it should become anything else.
Paragraphs must be separated by a blank line. Basic formatting of *italics* and **bold** is supported. This *can be **nested** like* so.
### Lists
1. Item 1
2. A second item
3. Number 3
4. Ⅳ
*Note: the fourth item uses the Unicode character for [Roman numeral four][2].*
* An item
* Another item
* Yet another item
* And there's more...
## Paragraph modifiers
### Code block
~~~
Code blocks are very useful for developers and other people who look at code or other things that are written in plain text. As you can see, it uses a fixed-width font.
~~~
You can also make `inline code` to add code into other things.
### Quote
> Here is a quote. What this is should be self explanatory. Quotes are automatically indented when they are used.
> _— Bart Simpson_
## Headings
There are six levels of headings. They correspond with the six levels of HTML headings. You've probably noticed them already in the page. Each level down uses one more hash character.
### Headings *can* also contain **formatting** like `inline code`
Of course, demonstrating what headings look like messes up the structure of the page.
I don't recommend using more than three or four levels of headings here, because, when you're smallest heading isn't too small, and you're largest heading isn't too big, and you want each size up to look noticeably larger and more important, there there are only so many sizes that you can use.
## URLs
URLs can be made in a handful of ways:
* A named link to [MarkItDown][3]. The easiest way to do these is to select what you want to make a link and hit `Ctrl+L`.
* Another named link to [MarkItDown](http://www.markitdown.net/)
* Sometimes you just want a URL like .
## Horizontal rule
A horizontal rule is a line that goes across the middle of the page.
---
It's sometimes handy for breaking things up.
## Images
Markdown can also contain images:
## Finally
There's actually a lot more to Markdown than this. See the official [introduction][4] and [syntax][5] for more information. However, be aware that this is not using the official implementation, and this might work subtly differently in some of the little things.
[1]: http://daringfireball.net/projects/markdown/
[2]: http://www.fileformat.info/info/unicode/char/2163/index.htm
[3]: http://www.markitdown.net/
[4]: http://daringfireball.net/projects/markdown/basics
[5]: http://daringfireball.net/projects/markdown/syntax
|keyword |text
|-------- |-----------------------
|red |Sunsets, apples, and
| |other red or reddish
| |things.
| |
|green | Leaves, grass, frogs
| | and other things it's
| | not easy being.