Markdown Editor Demo: Advanced Usage Example 3

Advanced Usage Example 3

Star Fork Watch Follow

Thankful to Krajee! BUY A COFFEEor to get more out of us.

Creating your own custom buttons and custom actions, labels, icons, and titles. The toolbarFooterL has been changed in this example to include buttons to generate LEFT arrow and RIGHT arrow markup. In addition, this example also shows how you can configure the markdown-it library plugin options. For example, you can allow HTML code to be typed in the editor by setting html setting to true within markdownItOptions.

When allowing html input, you must purify the HTML output to prevent XSS attack.

The purify.min.js is the DomPurify plugin by cure53. It is required to be loaded before markdown-editor.min.js if you wish to purify your HTML for HTML content preview and is called when purifyHtml is set to true. This is normally only needed when you set allow html to true within markdownItOptions .

<!-- Include DOM purify plugin to purify HTML output. This must be loaded before markdown-editor.js. -->
<script src="https://cdn.jsdelivr.net/gh/kartik-v/krajee-markdown-editor@1.0.0/plugins/purify/purify.min.js" type="text/javascript"></script>

Note, the demo example(s) uses:

this as the raw input source for the markdown textarea.
these assets loaded on the page in the order mentioned.

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)

Example

## Basic Typography

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.

## Headings

# h1 Heading 8-)
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading

### Emphasis

**This is bold text**

__This is bold text__

*This is italic text*

_This is italic text_

~~Strikethrough~~

### Subscript & Superscript

Supported via the `markdown-it-sub` and `markdown-it-sup` plugins.

- H~2~O
- 19^th^

### Inserted / Underlined Text

Supported via the `markdown-it-ins` plugin.

++Inserted text++

### Marked Text

Supported via the `markdown-it-mark` plugin.

==Marked text==

### Footnotes

Supported via the `markdown-it-footnote` plugin.

Footnote 1 link[^first].

Footnote 2 link[^second].

Inline footnote^[Text of inline footnote] definition.

Duplicated footnote reference[^second].

[^first]: Footnote text **can have markup**

and multiple paragraphs.

[^second]: Footnote 2 text (with duplicated reference).

### Blockquotes

> Block quotes are
> written like so.
>
> They can span multiple paragraphs,
> if you like.
>
> > They can be nested as well
>> ...by using additional greater-than signs right next to each other...
> > > ...or with spaces between arrows.

### Typographic replacements

With the markdown-it parser, the typographer option allows you to auto-format commonly used symbols. For example:

ellip.. ellipsis... (ellipsis extra)..... (ellipsis query)?..... (ellipsis exclamation)!....

!!!!!! ???? ,,  -- ---

"Smartypants, double quotes" and 'single quotes'.

Other smartypants configurations:

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

## Horizontal Rules

___

---

***
  
## Lists

### Unordered List

+ Create a list by starting a line with `+`, `-`, or `*`
+ Sub-lists are made by indenting 2 spaces:
  - Marker character change forces new list start:
    * Ac tristique libero volutpat at
    + Facilisis in pretium nisl aliquet
    - Nulla volutpat aliquam velit
+ Very easy!
    
### Ordered List

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

1. You can use sequential numbers...
1. ...or keep all the numbers as `1.`

Start numbering with offset:

57. foo
1. bar

### Nested List

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

### 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. Also you can lazy continue lists, add inline markup, and also include paragraphs
within each definition.

Apple

:   Pomaceous fruit of plants of the genus Malus in
the family Rosaceae (note the lazy continuation).

Orange

:   The fruit of an evergreen tree of the **genus Citrus** (note the inline markup).

Tomatoes

: There's no "e" in tomato.

{ some code, part of Definition 'Tomatoes' }

Third paragraph of definition 'Tomatoes'.

Here is an example of a _compact definition list style_

Term 1
  ~ Definition 1

Term 2
  ~ Definition 2a
  ~ Definition 2b

## Code

This is an `inline code`.

Here's an indented 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 CODE EXAMPLE:

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

JAVASCRIPT EXAMPLE

``` js
var foo = function (bar) {
  return bar++;
};

console.log(foo(5));
```

PHP CODE EXAMPLE:

~~~php
namespace site\controllers;

use yii\web\Controller;

class BaseController extends Controller {
    const HAPPY = 1;
    const SAD = 2;

public function actionGood($param) {
        if ($param === self::HAPPY) {
            echo 'I am happy.';
        } else {
            echo 'I am sad.';
        }
    }
}
~~~

## Links

[link text](http://dev.nodeca.com)

[link with title](http://nodeca.github.io/pica/demo/ "title text!")

Autoconverted link https://github.com/nodeca/pica (enable linkify to see)

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

[^1]: Footnote link text goes here.

## Images

![Minion](https://octodex.github.com/images/minion.png)
![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")

Like links, Images also have a footnote style syntax

![Alt text][id]

With a reference later in the document defining the URL location:

[id]: https://octodex.github.com/images/dojocat.jpg  "The Dojocat"

## 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!**     |

## Other

### Abbreviations

Supported via the `markdown-it-abbr` plugin. 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.

Note that it converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on.

### Emojies

Note that emojies need to be supported by the markdown parser. This is enabled in this package
via the `markdown-it-emoji` plugin.

> Classic markup: :wink: :smile: :cry: :laughing: :yum: :boy: :girl:
>
> Shortcuts (emoticons): :-) o:) :,( 8-) ;) ,:(

When using the default parser (markdown-it), you can set **useTwemoji** to **true** to change output using
[Twitter Emojis](https://github.com/twitter/twemoji).
You can also [check how to change output](https://github.com/markdown-it/markdown-it-emoji#change-output)
with twemoji.

### Smart Arrows

Supported via the `markdown-it-smartarrows` plugin. You can add "smart arrows" to markdown-it's typographic
enhancements:

|Code      |  Output  |
|:--------:|:--------:|
| `-->`    | -->      |
| `<--`    | <--      |
| `<-->`   | <-->     |
| `<==`    | <==      |
| `==>`    | ==>      |
| `<==>`   | <==>     |

### Checkboxes

Supported via the `markdown-it-checkbox` plugin. This allows to create checkboxes for tasklists as shown below.

- [x] Activity One
- [x] Activity Two
- [x] Activity Three
- [ ] Activity Four
- [ ] Activity Five
- [ ] Activity Six

---

##### Done.

Code

<textarea id="editor-a3" name="editor-a3" class="form-control" rows="15">
{RAW MARKDOWN DATA}
</textarea>

<script type="text/javascript">
$('#editor-a3').markdownEditor({
    toolbarFooterL: [
        ['arrowLeft', 'arrowRight']
    ],
    buttonActions: {
        arrowLeft: {before: '<--', after: ' ', 'default': ''},
        arrowRight: {before: '-->', after: ' ', 'default': ''}
    },
    buttonTitles: {
        arrowLeft: 'Left Arrow',
        arrowRight: 'Right Arrow'
    },
    icons: {
        arrowLeft: '<span class="fas fa-fw fa-arrow-left"></span>',
        arrowRight: '<span class="fas fa-fw fa-arrow-right"></span>'
    },
    markdownItOptions: {
        html: true
    },
    purifyHtml: true
});
</script>

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.

visitors to Krajee Jquery Plugins since 22-May-2017

Advanced Usage Example 3

Tip

Comments & Discussion

Note