@covalent/markdown
TypeScript icon, indicating that this package has built-in type declarations

8.8.1 • Public • Published

TdMarkdownComponent: td-markdown

<td-markdown> is a component that parses and renders Github flavored markdown. It is based on the showdown library.

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

API Summary

Inputs

  • content?: string

    • Markdown format content to be parsed as html markup.
    • Used to load data dynamically. e.g. README.md content.
  • simpleLineBreaks?: string

    • Sets whether newline characters inside paragraphs and spans are parsed as
      .
    • Defaults to false.
  • hostedUrl?: string

    • If markdown contains relative paths, this is required to generate correct urls.
  • anchor?: string

    • Anchor to jump to.

Events

  • contentReady: undefined
    • Event emitted after the markdown content rendering is finished.

Installation

This component can be installed as an npm package.

npm i -save @covalent/markdown

Setup

Then, import the CovalentMarkdownModule in your NgModule:

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

Theming

This module comes with its own Covalent theme which uses the material theme which is used by importing our theme scss file.

@use '@angular/material/theming' as mat;
@use '@covalent/markdown/markdown-theme' as markdown;

@include mat.core();

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

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

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

Example

Html:

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

Output:

Heading

Sub Heading (H2)

Steps (H2)

Package Sidebar

Install

npm i @covalent/markdown

Weekly Downloads

1,054

Version

8.8.1

License

MIT

Unpacked Size

173 kB

Total Files

17

Last publish

Collaborators

  • ct186029
  • emoralesb05
  • juliemarie
  • odubya320