mycirrus v1.0.0-beta.5-2

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:

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": [
  "path/to/node_modules/showdown/dist/showdown.js"
]

index.html:

<script src="path/to/node_modules/showdown/dist/showdown.js"></script>

Then, import the CovalentMarkdownModule in your NgModule:

import { CovalentMarkdownModule } from '@covalent/markdown';
@NgModule({
  imports: [
    CovalentMarkdownModule,
    ...
  ],
  ...
})
export class MyModule {}

Theming

The markdown module comes with its own covalent theme which uses the material theme which is used by importing our theme scss file.

@import '~@angular/material/theming';
@import '~@covalent/markdown/markdown-theme';

@include mat-core();

$primary: mat-palette($mat-orange, 800);
$accent:  mat-palette($mat-light-blue, 600, A100, A400);
$warn:    mat-palette($mat-red, 600);

$theme: mat-light-theme($primary, $accent, $warn);

@include markdown-markdown-theme($theme);

Or by loading them in the index.html file:

<link rel="stylesheet" href="/path/to/node_modules/highlight.js/styles/vs.css">

Example

Html:

<td-markdown>
  # Heading 
  ## Sub Heading (H2)
  ### Steps (H2)
</td-markdown>

Output:

Heading

Sub Heading (H2)

Steps (H2)