Skip to content

SiMarkdownComponent documentation

selector
si-markdown

Component to display markdown text

This component is built using concepts from ngx-remark, namely using Angular templates to render the AST produced by remark .

Unlike ngx-remark , it features a configuration based approach of extensibility so that multiple instances of the component can be used with the same configuration, e.g. inside a chat component w/o repeating templates.

Input Properties

NameTypeDefaultDescription
citations
SiMarkdownCitation[]Citation metadata used to create citations.
debug
booleanfalseDebug mode. When true, unknown node types will be displayed along with the node as JSON.
markdown
string''The markdown text to transform and display
options
SiMarkdownOptionsOptions to control rendering. Can be shared across multiple instances.

Output Properties

NameTypeDescription
extensionEvent
{ data: any, name: string }Emitted by extension components.

Attributes and Methods

NameTypeDefaultDescription
(readonly) meta
Signal<SiMarkdownMetadata>...Gives access to metadata in extension components

Types Documentation

extends SourceReference
Citation metadata associated with a markdown response.
Properties
Optional source description.
description?: string from description
Identifier referenced by bracket notation, such as [source-1] .
identifier?: string
Source name displayed to the user.
name: string from name
Zero-based, end-exclusive source range of the citation reference in the markdown source.
position?: { endIndex: number, startIndex: number }
Optional source quote. Takes precedence over description .
quote?: string from quote
Source URL.
url: string from url
Options for the markdown renderer. This holds all configuration and allows installing extensions. A number of extensions are already ready to use and shipped with Element.

Example:
import { siMarkdownMathKaTeX } from '@siemens/element-ng/markdown/extensions/math';
import remarkGemoji from 'remark-gemoji';

protected markdownOptions = new SiMarkdownOptions()
  .installExtension(siMarkdownMathKaTeX())
  .installUnifiedPlugin(remarkGemoji);



<si-markdown [markdown]="markdownText()" [options]="markdownOptions" />
Constructor
() => {}
Properties
codeTypes: Map<string, TypeHandler> = ...
directives: Map<string, TypeHandler> = ...
highlighter?: SiMarkdownHighlighter
plugins: PluginWithOptions[] = []
types: TypeHandler[] = []
Methods
Returns All code type handlers
getCodeTypeHandlers: () => Map<string, TypeHandler>
Returns The highlighter
getHighlighter: () => (SiMarkdownHighlighter | undefined)
Returns All type handlers
getTypeHandlers: () => TypeHandler[]
(extension: SiMarkdownExtension) => SiMarkdownOptions
Installs a extension which can contain plugins, type handlers
Returns self for chaining
Parameters
The extension definition
extension: SiMarkdownExtension
(plugin: UnifiedPlugin, options: any) => SiMarkdownOptions
Installs a plugin into the unified chain
Returns self for chaining
Parameters
The unified plugin
plugin: UnifiedPlugin
Options for the plugin
options?: any
(meta: SiMarkdownMetadata) => Processor<Root, Root, SiMarkdownRoot, undefined, undefined>
Creates the unified processor with all plugins and options
Returns unified processor
Parameters
meta: SiMarkdownMetadata
(directives: (TypeHandler | TypeHandler[])) => SiMarkdownOptions
Registers a component used to render a named Markdown directive.
Returns self for chaining
Parameters
directives: (TypeHandler | TypeHandler[])
(highlighter: SiMarkdownHighlighter) => SiMarkdownOptions
Sets the code highlighter
Parameters
The highlighter
highlighter?: SiMarkdownHighlighter
Options passed to makeProcessor()
Properties
citations?: SiMarkdownCitation[]
Definition of a single source
Properties
Optional source description.
description?: string
Source name displayed to the user.
name: string
Optional source quote. Takes precedence over description .
quote?: string
Source URL.
url: string
extends ComponentWithOptions<SiMarkdownExtensionComponent>
Type handler for a named type. This can be an AST node type, a code type, a directive name
Properties
The component used to render the node
component: Type<SiMarkdownExtensionComponent> from component
Options passed to the component
options?: any from options
Type name
type: string
ComponentWithOptions<SiMarkdownHighlighterComponent>
Combination of unified plugin with options
Properties
Options passed during plugin registration
options?: any
The plugin
plugin: UnifiedPlugin
<T>
A combination of a component and options passed to it during run-time
Properties
The component used to render the node
component: Type<T>
Options passed to the component
options?: any
Interface an extension component must implement
Properties
Node to be rendered
node: InputSignal<Node>
Options passed to the component
options: InputSignal<any>
The parent node
parent: InputSignal<Parent>
Interface a code highlighter component must implement
Properties
The code to be highlighted
code: InputSignal<string>
The language
language: InputSignal<string>
Options passed to the component
options: InputSignal<any>
Function the highlighter can call to updated the displayed language
updateLanguage: InputSignal<(lang: string) => void>
Processor
import
imported from unified
import
imported from @types/mdast
(Omit<Root, "children"> & { children: ExtendedRootContent[], references: { definitions: Map<string, Definition>, footnoteDefinitions: Map<string, FootnoteDefinition> } })
Extended root with references
(Plugin<any> | Transformer<any> | Preset | PluggableList)
An extension to the si-markdown component
Properties
Special code type handlers to install
codeTypes?: TypeHandler[]
Directives
directives?: TypeHandler[]
unified plugins to install
plugins?: PluginWithOptions[]
Type handlers to install
types?: TypeHandler[]
import
imported from @types/mdast
import
imported from @types/mdast
Plugin
import
imported from unified
Transformer
import
imported from unified
Preset
import
imported from unified
PluggableList
import
imported from unified
(RootContent | Footnotes | Citations | DirectiveNode)
import
imported from @types/mdast
extends Parent
Extra node for collecting all footnotes
Properties
List of children.
children: FootnoteDefinition[]
Info from the ecosystem.
data?: Data from Parent.data
Position of a node in a source document.

Nodes that are generated (not in the original source document) must not have a position.
position?: Position from Parent.position
Node type.
type: "footnotes"
extends Node
Container for one or more adjacent citation nodes.
Properties
children: Citation[]
Info from the ecosystem.
data?: Data from Node.data
Position of a node in a source document.

Nodes that are generated (not in the original source document) must not have a position.
position?: Position from Node.position
Node type.
type: "citations"
extends Parent
AST node created by remark-directive .
Properties
Attributes declared on the directive.
attributes: Record<string, (string | undefined)>
List of children.
children: RootContent[] from Parent.children
Info from the ecosystem.
data?: Data from Parent.data
The directive name without its leading colons.
name: string
Position of a node in a source document.

Nodes that are generated (not in the original source document) must not have a position.
position?: Position from Parent.position
Node type.
type: ("containerDirective" | "leafDirective" | "textDirective")
import
imported from @types/mdast
import
imported from @types/mdast
import
imported from @types/mdast
import
imported from @types/unist
extends Node
Inline node that references an item in the source citation array.
Properties
citationIndex: number
Info from the ecosystem.
data?: Data from Node.data
Position of a node in a source document.

Nodes that are generated (not in the original source document) must not have a position.
position?: Position from Node.position
Text replaced by a position-based citation.
text?: string
Node type.
type: "citation"

Except where otherwise noted, content on this site is licensed under MIT License.