TdMarkdownComponent: td-markdown
<td-markdown>
is an @angular component for Github flavored Javascript Markdown to HTML converter. It is based on showdown library.
API Summary
Methods:
Name | Type | Description |
---|---|---|
content |
string |
Markdown format content to be parsed as html markup. Used to load data dynamically. e.g. README.md content. |
contentReady |
function |
Event emitted after the markdown content rendering is finished. |
Note: This module uses the DomSanitizer service to ~sanitize~ the parsed html
from the showdown
lib to avoid XSS issues.
By default, --dev
build will log the following message in the console to let you know:
WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).
Installation
This component can be installed as npm package.
npm i -save @covalent/markdown
Setup
showdown.js
needs to be added as script in the .angular-cli.json
OR referenced in index.html
(installed as a markdown
dependency).
.angular-cli.json:
"scripts":
index.html:
Then, import the [CovalentMarkdownModule] in your NgModule:
;
Theming
The markdown
module comes with its own covalent
theme which uses the material theme which is used by importing our theme scss file.
;; @); $);$);$); $); @);
Or by loading them in the index.html
file:
Example
Html:
# Heading ## Sub Heading (H2) ### Steps (H2)
Output: