@ng-util/markdown

Vditor for Angular.

Demo

• Stackblitz

Usage

Installation

Install from npm repository:

npm install @ng-util/markdown --save

Simple

import { Component } from '@angular/core';
import { NuMonacoEditorComponent } from '@ng-util/monaco-editor';

@Component({
  selector: 'demo',
  template: `
    <nu-monaco-editor />
  `,
  imports: [NuMonacoEditorComponent],
})
export class MonacoDemo { }

Create markdown options in component.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<nu-markdown [(ngModel)]="value" />`,
})
export class DemoComponent {
  value = '# Title';
}

Preview

You can use nu-markdown-preview component to render a Markdown preview effect (no editing).

<nu-markdown-preview value="# Title" />

How to change cdn?

• Using provideNuMarkdownConfig({ libs: [] }) to adjust.

The libs parameter should contain index.min.js and index.css, like this:

provideNuMarkdownConfig({
  libs: [
    'https://cdn.jsdelivr.net/npm/vditor/dist/index.min.js',
    'https://cdn.jsdelivr.net/npm/vditor/dist/index.css'
  ]
})

In addition, You can also use local path:

// angular.json
{
  "glob": "*.(js|css)",
  "input": "node_modules/vditor/dist",
  "output": "/assets/vditor/"
}

Then modify the libs path:

provideNuMarkdownConfig({
  libs: [
    './assets/vditor/index.min.js',
    './assets/vditor/index.css'
  ]
})

API

nu-markdown

| Property | Description | Type | Default | |----------|-------------|------|---------| | [options] | Equar IOptions | any | - | | [disabled] | Disabled of markdown editor | boolean | false | | [delay] | Delay init monaco editor, unit: ms | number | 0 | | (ready) | Ready event | EventEmitter<any> | - |

nu-markdown-preview

| Property | Description | Type | Default | |----------|-------------|------|---------| | [options] | Equar IOptions | any | - | | [delay] | Delay init monaco editor, unit: ms | number | 0 | | (ready) | Ready event | EventEmitter<string> | - |

License

The MIT License (see the LICENSE file for the full text)