ngx-markdown

ngx-markdown

Version 18.1.0
Published 1 month ago
317 kB
1 dependency
MIT license

Install

npm i ngx-markdown

yarn add ngx-markdown

pnpm add ngx-markdown

Overview

Angular library that uses marked to parse markdown to html combined with Prism.js for synthax highlights

Index

Variables

variable CLIPBOARD_OPTIONS

const CLIPBOARD_OPTIONS: InjectionToken<ClipboardOptions>;

variable errorClipboardNotLoaded

const errorClipboardNotLoaded: string;

variable errorClipboardViewContainerRequired

const errorClipboardViewContainerRequired: string;

variable errorJoyPixelsNotLoaded

const errorJoyPixelsNotLoaded: string;

variable errorKatexNotLoaded

const errorKatexNotLoaded: string;

variable errorMermaidNotLoaded

const errorMermaidNotLoaded: string;

variable errorSrcWithoutHttpClient

const errorSrcWithoutHttpClient: string;

variable MARKED_EXTENSIONS

const MARKED_EXTENSIONS: InjectionToken<MarkedExtension[]>;

variable MARKED_OPTIONS

const MARKED_OPTIONS: InjectionToken<MarkedOptions>;

variable SECURITY_CONTEXT

const SECURITY_CONTEXT: InjectionToken<SecurityContext>;

Functions

function provideMarkdown

provideMarkdown: (markdownModuleConfig?: MarkdownModuleConfig) => Provider[];

Classes

class ClipboardButtonComponent

class ClipboardButtonComponent {}

property copied$

readonly copied$: any;

property copiedText$

readonly copiedText$: any;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    ClipboardButtonComponent,
    'markdown-clipboard',
    never,
    {},
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<ClipboardButtonComponent, never>;

method onCopyToClipboardClick

onCopyToClipboardClick: () => void;

class ExtendedRenderer

class ExtendedRenderer extends Renderer {}

property ɵNgxMarkdownRendererExtendedForExtensions

ɵNgxMarkdownRendererExtendedForExtensions: boolean;

property ɵNgxMarkdownRendererExtendedForMermaid

ɵNgxMarkdownRendererExtendedForMermaid: boolean;

class KatexSpecificOptions

class KatexSpecificOptions {}

property allowedProtocols

allowedProtocols?: string[];

Allowed protocols in \href
Use _relative to allow relative urls
Use * to allow all protocols

property colorIsTextColor

colorIsTextColor?: boolean;

If true, \color will work like LaTeX's \textcolor and takes 2 arguments
If false, \color will work like LaTeX's \color and takes 1 argument
In both cases, \textcolor works as in LaTeX
false

property displayMode

displayMode?: boolean;

If true, math will be rendered in display mode (math in display style and center math on page)
If false, math will be rendered in inline mode false

property errorColor

errorColor?: string;

A Color string given in format #XXX or #XXXXXX

property macros

macros?: any;

A collection of custom macros.
See src/macros.js for its usage

property maxExpand

maxExpand?: number;

Limit the number of macro expansions to specified number
If set to Infinity, marco expander will try to fully expand as in LaTex
1000

property maxSize

maxSize?: number;

All user-specified sizes will be caped to maxSize ems
If set to Infinity, users can make elements and space arbitrarily large
Infinity

property strict

strict?: string | boolean | Function;

If false or "ignore", allow features that make writing in LaTex convenient but not supported by LaTex
If true or "error", throw an error for such transgressions
If "warn", warn about behavior via console.warn
"warn"

property throwOnError

throwOnError?: boolean;

If true, KaTeX will throw a ParseError when it encounters an unsupported command or invalid LaTex
If false, KaTeX will render unsupported commands as text, and render invalid LaTeX as its source code with hover text giving the error, in color given by errorColor true

class LanguagePipe

class LanguagePipe implements PipeTransform {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<LanguagePipe, never>;

property ɵpipe

static ɵpipe: i0.ɵɵPipeDeclaration<LanguagePipe, 'language', true>;

method transform

transform: (value: string | null, language: string) => string;

class MarkdownComponent

class MarkdownComponent implements OnChanges, AfterViewInit, OnDestroy {}

constructor

constructor(
    element: ElementRef<HTMLElement>,
    markdownService: MarkdownService,
    viewContainerRef: ViewContainerRef
);

property clipboard

clipboard: boolean;

property clipboardButtonComponent

clipboardButtonComponent: any;

property clipboardButtonTemplate

clipboardButtonTemplate: any;

property commandLine

commandLine: boolean;

property data

data: string;

property disableSanitizer

disableSanitizer: boolean;

property element

element: ElementRef<HTMLElement>;

property emoji

emoji: boolean;

property error

error: EventEmitter<string | Error>;

property filterOutput

filterOutput: string;

property host

host: string;

property inline

inline: boolean;

property katex

katex: boolean;

property katexOptions

katexOptions: KatexSpecificOptions & RenderMathInElementSpecificOptions;

property line

line: string | string[];

property lineHighlight

lineHighlight: boolean;

property lineNumbers

lineNumbers: boolean;

property lineOffset

lineOffset: number;

property load

load: EventEmitter<string>;

property markdownService

markdownService: MarkdownService;

property mermaid

mermaid: boolean;

property mermaidOptions

mermaidOptions: MermaidAPI.Config;

property ngAcceptInputType_clipboard

protected static ngAcceptInputType_clipboard: boolean | '';

property ngAcceptInputType_commandLine

protected static ngAcceptInputType_commandLine: boolean | '';

property ngAcceptInputType_emoji

protected static ngAcceptInputType_emoji: boolean | '';

property ngAcceptInputType_katex

protected static ngAcceptInputType_katex: boolean | '';

property ngAcceptInputType_lineHighlight

protected static ngAcceptInputType_lineHighlight: boolean | '';

property ngAcceptInputType_lineNumbers

protected static ngAcceptInputType_lineNumbers: boolean | '';

property ngAcceptInputType_mermaid

protected static ngAcceptInputType_mermaid: boolean | '';

property output

output: string;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    MarkdownComponent,
    'markdown, [markdown]',
    never,
    {
        data: { alias: 'data'; required: false };
        src: { alias: 'src'; required: false };
        disableSanitizer: { alias: 'disableSanitizer'; required: false };
        inline: { alias: 'inline'; required: false };
        clipboard: { alias: 'clipboard'; required: false };
        clipboardButtonComponent: {
            alias: 'clipboardButtonComponent';
            required: false;
        };
        clipboardButtonTemplate: {
            alias: 'clipboardButtonTemplate';
            required: false;
        };
        emoji: { alias: 'emoji'; required: false };
        katex: { alias: 'katex'; required: false };
        katexOptions: { alias: 'katexOptions'; required: false };
        mermaid: { alias: 'mermaid'; required: false };
        mermaidOptions: { alias: 'mermaidOptions'; required: false };
        lineHighlight: { alias: 'lineHighlight'; required: false };
        line: { alias: 'line'; required: false };
        lineOffset: { alias: 'lineOffset'; required: false };
        lineNumbers: { alias: 'lineNumbers'; required: false };
        start: { alias: 'start'; required: false };
        commandLine: { alias: 'commandLine'; required: false };
        filterOutput: { alias: 'filterOutput'; required: false };
        host: { alias: 'host'; required: false };
        prompt: { alias: 'prompt'; required: false };
        output: { alias: 'output'; required: false };
        user: { alias: 'user'; required: false };
    },
    { error: 'error'; load: 'load'; ready: 'ready' },
    never,
    ['*'],
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<MarkdownComponent, never>;

property prompt

prompt: string;

property ready

ready: EventEmitter<void>;

property src

src: string;

property start

start: number;

property user

user: string;

property viewContainerRef

viewContainerRef: ViewContainerRef;

method loadContent

loadContent: () => void;

method ngAfterViewInit

ngAfterViewInit: () => void;

method ngOnChanges

ngOnChanges: () => void;

method ngOnDestroy

ngOnDestroy: () => void;

method render

render: (markdown: string, decodeHtml?: boolean) => Promise<void>;

class MarkdownModule

class MarkdownModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<MarkdownModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<MarkdownModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    MarkdownModule,
    never,
    [
        any,
        typeof i2.ClipboardButtonComponent,
        typeof i3.LanguagePipe,
        typeof i4.MarkdownComponent,
        typeof i5.MarkdownPipe
    ],
    [
        typeof i2.ClipboardButtonComponent,
        typeof i3.LanguagePipe,
        typeof i4.MarkdownComponent,
        typeof i5.MarkdownPipe
    ]
>;

method forChild

static forChild: () => ModuleWithProviders<MarkdownModule>;

method forRoot

static forRoot: (
    markdownModuleConfig?: MarkdownModuleConfig
) => ModuleWithProviders<MarkdownModule>;

class MarkdownPipe

class MarkdownPipe implements PipeTransform {}

constructor

constructor(
    domSanitizer: DomSanitizer,
    elementRef: ElementRef<HTMLElement>,
    markdownService: MarkdownService,
    viewContainerRef: ViewContainerRef,
    zone: NgZone
);

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<MarkdownPipe, never>;

property ɵpipe

static ɵpipe: i0.ɵɵPipeDeclaration<MarkdownPipe, 'markdown', true>;

method transform

transform: (value: string, options?: MarkdownPipeOptions) => Promise<SafeHtml>;

class MarkdownService

class MarkdownService {}

constructor

constructor(
    clipboardOptions: ClipboardOptions,
    extensions: MarkedExtension[],
    options: MarkedOptions,
    platform: Object,
    securityContext: SecurityContext,
    http: HttpClient,
    sanitizer: DomSanitizer
);

property options

options: MarkedOptions;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<
    MarkdownService,
    [
        { optional: true },
        { optional: true },
        { optional: true },
        null,
        null,
        { optional: true },
        null
    ]
>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<MarkdownService>;

property reload$

readonly reload$: Observable<void>;

property renderer

renderer: MarkedRenderer;

method getSource

getSource: (src: string) => Observable<string>;

method highlight

highlight: (element?: Element | Document) => void;

method parse

parse: (
    markdown: string,
    parseOptions?: ParseOptions
) => string | Promise<string>;

method reload

reload: () => void;

method render

render: (
    element: HTMLElement,
    options?: RenderOptions,
    viewContainerRef?: ViewContainerRef
) => void;

Interfaces

interface ClipboardOptions

interface ClipboardOptions {}

property buttonComponent

buttonComponent?: Type<unknown>;

interface ClipboardRenderOptions

interface ClipboardRenderOptions extends ClipboardOptions {}

property buttonTemplate

buttonTemplate?: TemplateRef<unknown>;

interface MarkdownModuleConfig

interface MarkdownModuleConfig {}

property clipboardOptions

clipboardOptions?: Provider;

property loader

loader?: Provider;

property markedExtensions

markedExtensions?: MarkedExtension[];

property markedOptions

markedOptions?: Provider;

property sanitize

sanitize?: SecurityContext;

interface ParseOptions

interface ParseOptions {}

property decodeHtml

decodeHtml?: boolean;

property disableSanitizer

disableSanitizer?: boolean;

property emoji

emoji?: boolean;

property inline

inline?: boolean;

property markedOptions

markedOptions?: MarkedOptions;

property mermaid

mermaid?: boolean;

interface RenderMathInElementSpecificOptions

interface RenderMathInElementSpecificOptions {}

property delimiters

delimiters?:
    | ReadonlyArray<RenderMathInElementSpecificOptionsDelimiters>
    | undefined;

A list of delimiters to look for math
[ {left: "$$", right: "$$", display: true}, {left: "$", right: "$", display: false}, {left: "\[", right: "\]", display: true} ]

property ignoredClasses

ignoredClasses?: string[] | undefined;

A list of DOM node class names to ignore when recursing through
[]

property ignoredTags

ignoredTags?: ReadonlyArray<keyof HTMLElementTagNameMap> | undefined;

A list of DOM node types to ignore when recursing through
["script", "noscript", "style", "textarea", "pre", "code"]

method errorCallback

errorCallback: (msg: string, err: Error) => void;

A callback method returning a message and an error stack in case of an critical error during rendering
Parameter msg
Message generated by KaTeX
Parameter err
Caught error
console.error

interface RenderMathInElementSpecificOptionsDelimiters

interface RenderMathInElementSpecificOptionsDelimiters {}

property display

display: boolean;

A boolean of whether the math in the expression should be rendered in display mode or not

property left

left: string;

A string which starts the math expression (i.e. the left delimiter)

property right

right: string;

A string which ends the math expression (i.e. the right delimiter)

interface RenderOptions

interface RenderOptions {}

property clipboard

clipboard?: boolean;

property clipboardOptions

clipboardOptions?: ClipboardRenderOptions;

property katex

katex?: boolean;

property katexOptions

katexOptions?: KatexOptions;

property mermaid

mermaid?: boolean;

property mermaidOptions

mermaidOptions?: MermaidAPI.Config;

Enums

enum PrismPlugin

enum PrismPlugin {
    CommandLine = 'command-line',
    LineHighlight = 'line-highlight',
    LineNumbers = 'line-numbers',
}

member CommandLine

CommandLine = 'command-line'

member LineHighlight

LineHighlight = 'line-highlight'

member LineNumbers

LineNumbers = 'line-numbers'

Type Aliases

type KatexOptions

type KatexOptions = KatexSpecificOptions & RenderMathInElementSpecificOptions;

renderMathInElement options contain KaTeX render options and renderMathInElement specific options

type MarkdownPipeOptions

type MarkdownPipeOptions = ParseOptions & RenderOptions;

Namespaces

namespace MermaidAPI

namespace MermaidAPI {}

interface Config

interface Config {}

property arrowMarkerAbsolute

arrowMarkerAbsolute?: boolean | undefined;

**arrowMarkerAbsolute** - This options controls whether or arrow markers in html code will be absolute paths or an anchor, #. This matters if you are using base tag settings. default: false

property class

class?: any;

property darkMode

darkMode?: boolean | undefined;

property deterministicIds

deterministicIds?: boolean | undefined;

property deterministicIDSeed

deterministicIDSeed?: string | undefined;

property flowchart

flowchart?: FlowChartConfig | undefined;

### flowchart *The object containing configurations specific for flowcharts*

property fontFamily

fontFamily?: string | undefined;

property gantt

gantt?: GanttConfig | undefined;

### gantt The object containing configurations specific for gantt diagrams*

property git

git?: any;

property journey

journey?: any;

To supress mermaid warning *

property logLevel

logLevel?: LogLevel | undefined;

logLevel , decides the amount of logging to be used. default: LogLevel.Fatal

property maxTextSize

maxTextSize?: number | undefined;

property pie

pie?: any;

property requirement

requirement?: any;

property secure

secure?: Array<keyof Config> | undefined;

property securityLevel

securityLevel?: SecurityLevel | undefined;

### securityLevel This changes the default behaviour of mermaid so that after upgrade to 8.2, unless the securityLevel is not changed, tags in flowcharts are encoded as tags and clicking is disabled. **sandbox** security level is still in the beta version. default: SecurityLevel.Strict

property sequence

sequence?: SequenceDiagramConfig | undefined;

### sequenceDiagram The object containing configurations specific for sequence diagrams

property startOnLoad

startOnLoad?: boolean | undefined;

**startOnLoad** - This options controls whether or mermaid starts when the page loads default: true

property state

state?: any;

property theme

theme?: Theme | undefined;

property themeCSS

themeCSS?: string | undefined;

property themeVariables

themeVariables?: any;

interface FlowChartConfig

interface FlowChartConfig {}

property curve

curve?: string | undefined;

default: 'monotoneX'

property diagramPadding

diagramPadding?: number | undefined;

**diagramPadding** - amount of padding around the diagram as a whole default: 8

property htmlLabels

htmlLabels?: boolean | undefined;

**htmlLabels** - Flag for setting whether or not a html tag should be used for rendering labels on the edges default: true

property nodeSpacing

nodeSpacing?: number | undefined;

**nodeSpacing** - Defines the spacing between nodes on the same level default: 50

property padding

padding?: number | undefined;

**rankSpacing** - Only used in new experimental rendering, represents the padding between the labels and the shape default: 15

property rankSpacing

rankSpacing?: number | undefined;

**rankSpacing** - Defines the spacing between nodes on different levels default: 50

property useMaxWidth

useMaxWidth?: boolean | undefined;

default: true

interface GanttConfig

interface GanttConfig {}

property axisFormat

axisFormat?: string | undefined;

**axisFormat** - datetime format of the axis, this might need adjustment to match your locale and preferences default: '%Y-%m-%d'

property barGap

barGap?: number | undefined;

**barGap** - the margin between the different activities in the gantt diagram default: 4

property barHeight

barHeight?: number | undefined;

**barHeight** - the height of the bars in the graph default: 20

property fontFamily

fontFamily?: string | undefined;

**fontFamily** - font family ... default: '"Open-Sans", "sans-serif"'

property fontSize

fontSize?: number | undefined;

**fontSize** - font size ... default: 11

property gridLineStartPadding

gridLineStartPadding?: number | undefined;

**gridLineStartPadding** - Vertical starting position of the grid lines default: 35

property leftPadding

leftPadding?: number | undefined;

**leftPadding** - the space allocated for the section name to the left of the activities. default: 75

property numberSectionStyles

numberSectionStyles?: number | undefined;

**numberSectionStyles** - the number of alternating section styles default: 4

property titleTopMargin

titleTopMargin?: number | undefined;

**titleTopMargin** - margin top for the text over the gantt diagram default: 25

property topPadding

topPadding?: number | undefined;

**topPadding** - margin between title and gantt diagram and between axis and gantt diagram. default: 50

interface RunOptions

interface RunOptions {}

property nodes

nodes?: ArrayLike<HTMLElement>;

The nodes to render. If this is set, querySelector will be ignored.

property postRenderCallback

postRenderCallback?: (id: string) => unknown;

A callback to call after each diagram is rendered.

property querySelector

querySelector?: string;

The query selector to use when finding elements to render. Default: ".mermaid".

property suppressErrors

suppressErrors?: boolean;

If true, errors will be logged to the console, but not thrown. Default: false

interface SequenceDiagramConfig

interface SequenceDiagramConfig {}

property actorMargin

actorMargin?: number | undefined;

**actorMargin** - Margin between actors default: 10

property bottomMarginAdj

bottomMarginAdj?: number | undefined;

**bottomMarginAdj** - Depending on css styling this might need adjustment. Prolongs the edge of the diagram downwards default: 1

property boxMargin

boxMargin?: number | undefined;

**boxMargin** - Margin around loop boxes default: 10

property boxTextMargin

boxTextMargin?: number | undefined;

**boxTextMargin** - margin around the text in loop/alt/opt boxes default: 5

property diagramMarginX

diagramMarginX?: number | undefined;

**diagramMarginX** - margin to the right and left of the sequence diagram default: 50

property diagramMarginY

diagramMarginY?: number | undefined;

**diagramMarginY** - margin to the over and under the sequence diagram default: 10

property height

height?: number | undefined;

**height** - Height of actor boxes default: 65

property messageMargin

messageMargin?: number | undefined;

**messageMargin** - Space between messages default: 35

property mirrorActors

mirrorActors?: boolean | undefined;

**mirrorActors** - mirror actors under diagram default: true

property noteMargin

noteMargin?: number | undefined;

**noteMargin** - margin around notes default: 10

property rightAngles

rightAngles?: boolean | undefined;

This will display arrows that start and begin at the same node as right angles, rather than a curve Default value: false

property useMaxWidth

useMaxWidth?: boolean | undefined;

**useMaxWidth** - when this flag is set the height and width is set to 100% and is then scaling with the available space if not the absolute space required is used default: true

property width

width?: number | undefined;

**width** - Width of actor boxes default: 150

enum LogLevel

enum LogLevel {
    Debug = 1,
    Info = 2,
    Warn = 3,
    Error = 4,
    Fatal = 5,
}

member Debug

Debug = 1

member Error

Error = 4

member Fatal

Fatal = 5

member Info

Info = 2

member Warn

Warn = 3

enum SecurityLevel

enum SecurityLevel {
    Strict = 'strict',
    Loose = 'loose',
    Antiscript = 'antiscript',
    Sandbox = 'sandbox',
}

member Antiscript

Antiscript = 'antiscript'

html tags in text are allowed, (only script element is removed), click functionality is enabled

member Loose

Loose = 'loose'

tags in text are allowed, click functionality is enabled

member Sandbox

Sandbox = 'sandbox'

with this security level all rendering takes place in a sandboxed iframe. This prevent any javascript running in the context. This may hinder interactive functionality of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc.

member Strict

Strict = 'strict'

(default) tags in text are encoded, click functionality is disabled

enum Theme

enum Theme {
    Base = 'base',
    Forest = 'forest',
    Dark = 'dark',
    Default = 'default',
    Neutral = 'neutral',
}

member Base

Base = 'base'

Designed to modified, as the name implies it is supposed to be used as the base for making custom themes.

member Dark

Dark = 'dark'

A theme that would go well with other dark colored elements.

member Default

Default = 'default'

The default theme for all diagrams.

member Forest

Forest = 'forest'

A theme full of light greens that is easy on the eyes.

member Neutral

Neutral = 'neutral'

The theme to be used for black and white printing

Package Files (14)

Dependencies (1)

tslib

Dev Dependencies (0)

No dev dependencies.

Peer Dependencies (6)

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/ngx-markdown.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/ngx-markdown)

HTML

<a href="https://www.jsdocs.io/package/ngx-markdown"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 1 month ago.
Package analyzed in 5804 ms.
Missing or incorrect documentation? Open an issue for this package.