hoangductho/angular-markdown-toolkit

Markdown Editor and Markdown Express for AngularJS

Markdown For AngularJS

1. Overview

• Introduce:

• Markdown module is markdown toolkit in the angular page.
• this module is directives of pagedown-extra module for AngularJS
• it use padedown-extra library in bower to convert markdown standard
• thís module provide 2 options for markdown style: markdown-html and markdown-safe
• "markdown-html" allow add html tags into view
• "markdown-safe" using sanitizing protected will be replace all html tag into view
• This module using github-markdown-css as main stylesheet for show
• This use google-code-prettify to highlight code
• This module allow you create multiple markdown editor in a page by using "suffix" parameter.

• Note:

• Use markdown-html allow you add html code into Markdown but your site vulnerable to XSS attacks.
• Use markdown-safe, your site is poor, but it is safe for user.

2. Install Markdown Module

Install:

bower install --save angular-markdown-toolkit

After install, markdown module included into index.html:

<!--Markdown module css loading-->
<link rel="stylesheet" href="scripts/modules/markdown/markdown.css">

<!--Markdown module js loading-->
<script src="scripts/modules/markdown/markdown.js"></script>

To use markdown module, you need inject it into your module with name markdown. Exam

angular.module('yourApp', ['markdown']);

3. Dependencies

• Pagedown Extra: https://github.com/jmcmanus/pagedown-extra

install:

bower install --save pagedown-extra

include pagedown extra into index.html:

<script src="bower_components/pagedown-extra/pagedown/Markdown.Converter.js"></script>
<script src="bower_components/pagedown-extra/pagedown/Markdown.Sanitizer.js"></script>
<script src="bower_components/pagedown-extra/pagedown/Markdown.Editor.js"></script>
<script src="bower_components/pagedown-extra/Markdown.Extra.js"></script>

• GitHub Markdown CSS: https://github.com/sindresorhus/github-markdown-css

install:

bower install --save github-markdown-css

• Google Code Prettify: https://github.com/tcollard/google-code-prettify

install:

bower install --save google-code-prettify

• Bootstrap

install:

bower install --save bootstrap

---

Usage Markdown Module

1. Call Markdown Editor

Markdown code have 2 options: "markdown html" and "markdown safe".

• Markdown html allow you input and express html code into markdown code. It make flexibility for express, but it isn't safe with the surface attacks, exam XSS.

• Markdown safe deny to express html code into markdown code. It makes your website become monotonous, but it protected your site against XSS attacks. It using sanitizing filter to extrude all html tags before express markdown code into view

So, Markdown Module provide 2 editors for that options:

• Call Markdown HTML Editor: you add markdown editor tag <markdown-html></markdown-html> into your html code.
• Call Markdown Safe Editor: you add markdown editor tag <markdown-safe></markdown-safe> into your html code.

2. Multiple Markdown Editor

Markdown Module allow you create multi editor in a page. So, to do it, you need add suffix parameter into your markdown editor tags. With once of editor, suffix is only one.

Example1:

<markdown-html suffix="-first"></markdown-html>

<markdown-html suffix="-second"></markdown-html>

Example2:

<markdown-safe suffix="first"></markdown-safe>

<markdown-safe suffix="second"></markdown-safe>

3. Push content into Markdown Editor

If you want revise markdown code existed, you can push your code into Markdown Editors by content parameter.

Example1:

<markdown-html content="##Demo##"></markdown-html>

Example2:

<markdown-safe content="##Markdown Safe Editor Demo##"></markdown-safe>

4. Express Markdown Content

When you have markdown content, and you want express it in your site, you can choice once in two options: express markdown safe and express markdown html.

• Express markdown safe: you add atribute markdown-safe-viewer into your html tags. Example:

<div markdown-safe-viewer></div>
// Or
<pre markdown-safe-viewer></pre>

• Express markdown html: you add atribute markdown-html-viewer into your html tags. Exam:

<div markdown-html-viewer></div>
// Or
<pre markdown-html-viewer></pre>

---

Consultation

• Pagedown Extra: https://github.com/jmcmanus/pagedown-extra
• Angular Pagedown: https://github.com/kennyki/angular-pagedown
• GitHub Markdown CSS: https://github.com/sindresorhus/github-markdown-css
• Google Code Prettify: https://github.com/tcollard/google-code-prettify

---

Author: Hoang Duc Tho