ng-realmark

NG-RealMark

Real-time Markdown module for Angular.io. Code highlighting is provided by Prismjs and ShowDown.

Live example here

Install (Angular CLI project)

Step 1: Add module to project through npm npm install ng-realmark --save

Step 2: Reference in main NgModule

import {RealMarkModule} from "ng-realmark/ng-realmark";
 
@NgModule({
  imports: [ …
    RealMarkModule.forRoot({flavor: 'github'}), // or original or vanilla
    …
	]…

Step 3: Add stylesheet to angular.cli

"styles": [
  ...
	"../node_modules/ng-realmark/realmark.css"
  ...
],

Usage

Component 1 - Previewer

<realmark-previewer [content]="markdownContentVar" > </realmark-previewer>

Automatic code block wrapping can be achieve be adding the [codeBlock]=“‘js’” attribute. E.g.

<realmark-previewer [content]="codeContentVar" [codeBlock]="'js'" > </realmark-previewer>

Component 2 - Diff

<realmark-diff [content]="MarkDownNewContent" [original]="MarkDownOriginalContent">
	Title to be displayed
</realmark-diff>

Automatic code block wrapping can be achieve be adding the [codeBlock]=“‘js’” attribute. E.g.

<realmark-diff [content]="CodeNewContent" [original]="CodeOriginalContent" [codeBlock]="'js'" >
	Title to be displayed
</realmark-diff>

Prerequisites

Please install Node.js and npm if they are not already installed on your computer.

Verify that you are running at least node v6.x.x and npm 3.x.x by running node -v and npm -v in a terminal / console window. Older versions may produce errors.