Markdown Editor Demo

Note

This is a demo of MarkdownEditor used within yii ActiveForm. You can check the client validation by setting the notes text to null. The Submit / Reset buttons for ActiveForm is provided for testing.
Click on Preview to see the HTML formatted output.
Click Export to export content as text or HTML.
Most toolbar buttons below support block formatting. You can select a block of text and click a button to apply formatting to the entire block.
Undo most actions by selecting the same block of text and clicking the button again.
Any embedded XSS/Javascripts will be purified and not be displayed for preview. If you need to display a code within script tags as text escape the > character like <script\>.

Tip

Not seeing the updated content on this page! Hard refresh your browser to clean cache for this page (e.g. SHIFT-F5 on Windows Chrome)

Notes

# Heading 1 #

Paragraphs are separated by a blank line.

2nd paragraph. *Italic*, **bold**, `monospace`. Itemized lists
look like:

* this one
  * that one
  * the other one

Note that --- not considering the asterisk --- the actual text
content starts at 3-columns in.

> Block quotes are
> written like so.
>
> They can span multiple paragraphs,
> if you like.

With `smartyPants` set to true in the markdown module configuration, you can 
format your content smartly:

- Use 3 dashes `---` for an em-dash. (e.g. Note --- Its a cool day)
 - Use 2 dashes `--` for an en-dash or ranges (e.g. "It's all in chapters 12--14"). 
 - Three dots `...` will be converted to an ellipsis. (e.g. He goes on and on ...)
 - Straight quotes ( `"` and `'` ) will be converted to "curly double" and 'curly single'
 - Backticks-style quotes (<code>``like this''</code>) will be shown as curly entities as well
 
  
## Heading 2 ##

Here is a numbered list:

1. first item
2. second item
3. third item

Note again how the actual text starts at 3 columns in (3 characters
from the left side).

Here's a code block sample:

# Let me re-iterate ...
    for i in 1 .. 10 { do-something(i) }

As you probably guessed, indented 4 spaces. By the way, instead of
indenting the block, you can use delimited blocks, if you like:

~~~
define foobar() {
    print "Welcome to flavor country!";
}
~~~

(which makes copying & pasting easier). You can optionally mark the
delimited block for syntax highlighting with any code pretty CSS framework.

~~~python
import time
# Quick, count to ten!
for i in range(10):
    # (but not *too* quick)
    time.sleep(0.5)
    print i
~~~

### Heading 3 ###

Now a nested list:

1. First, get these ingredients: 
   - carrots
   - celery
   - lentils

2. Boil some water.

3. Dump everything in the pot and follow  
   this algorithm:
   - find wooden spoon 
   - manage pot
      - uncover pot  
      - stir  
      - cover pot  
      - balance wooden spoon precariously on pot handle  
   - wait 10 minutes 
   - goto first step (or shut off burner when done) 
   
* Do not bump wooden spoon or it will fall.

Notice again how text always lines up on at 3-space indents (including
that last line which continues item 3 above).

Here's a link to [a website](https://foo.bar). Here's a link to a [local
doc](local-doc.html). Here's a footnote [^1].

[^1]: Footnote text goes here.

### Tables ###

Tables can look like this:

size | material     | color
---- | ------------ | ------------
9    | leather      | brown
10   | hemp canvas  | natural
11   | glass        | transparent

You can specify alignment for each column by adding colons to separator lines. 
A colon at the left of the separator line will make the column left-aligned; a 
colon on the right of the line will make the column right-aligned; colons at both 
side means the column is center-aligned.

You can apply span-level formatting to the content of each cell using regular Markdown syntax:

| Function name | Description                    |
| ------------- | ------------------------------ |
| `help()`      | Display the help window.       |
| `destroy()`   | **Destroy your computer!**     |

### Definition Lists ###

Apple
   : Pomaceous fruit of plants of the genus Malus in 
   the family Rosaceae.
  
Orange
   : The fruit of an evergreen tree of the genus Citrus.  
  
Tomatoes
   : There's no "e" in tomato.

You can put blank lines in between each of the above definition list lines to spread things
out more.

Apple

:   Pomaceous fruit of plants of the genus Malus in 
    the family Rosaceae.

Orange

:   The fruit of an evergreen tree of the genus Citrus.

Tomatoes

: There's no "e" in tomato.

You can also associate more than one term to a definition:

Term 1
Term 2

:   Definition a

Term 3

:   Definition b

### Other ###

#### Abbreviations ####

(Note heading 4 above)

Markdown Extra adds supports for abbreviations. How it works is pretty simple:

Create an abbreviation definition like this:
~~~
*[HTML]: Hyper Text Markup Language
*[W3C]:  World Wide Web Consortium
~~~

*[HTML]: Hyper Text Markup Language
*[W3C]:  World Wide Web Consortium

then, elsewhere in the document, write text such as:

The HTML specification
is maintained by the W3C.

and watch how the instance of those words in the text are highlighted.

Closing line below.

---

##### Done. #####

You may use PHP Markdown Extra and PHP SmartyPants Typographer syntax.
To undo / redo, press CTRL-Z / CTRL-Y. You can also undo most button actions by clicking it again.

Note

You can now visit the Krajee Webtips Q & A forum for searching OR asking questions OR helping programmers with answers on these extensions and plugins. For asking a question click here. Select the appropriate question category (i.e. Krajee Plugins) and choose this current page plugin in the question related to field.

The comments and discussion section below are intended for generic discussions or feedback for this plugin. Developers may not be able to search or lookup here specific questions or tips on usage for this plugin.