@kyma-project/dc-markdown-render-engine

Markdown Render Engine

Overview

The Markdown render engine is based on the React Markdown component. It allows you to render .md files.

Installation

• using npm

  npm i @kyma-project/dc-markdown-render-engine

• using yarn

  yarn add @kyma-project/dc-markdown-render-engine

Configuration

NOTE: The Markdown render engine supports all options available in the React Markdown component.

Name	Required	Type	Default value	Description
parsers	No	MarkdownParserPlugin[]	[]	Defines custom parsers for custom content in Markdown files. Go here to read more about write parsers.
customRenderers	No	Renderers	{}	Defines an object in which the keys represent the node type, and the value is a React component. The object is merged with the default renderers. The props passed to the component vary based on the type of node. See the default implementations of renderers.
highlightTheme	No	any	{}	Defines custom styles for highlighting code blocks. The Markdown render engine uses PrismJS to highlight. See the style examples.
headingPrefix	No	string or ((source: Source) => string), where Source is type	""	Defines a prefix for any heading in a Markdown file.
copyButton	No	ReactNode	null	Defines a custom copy button in code blocks. The Markdown render engine accepts only code blocks as a value to copy.

NOTE: To learn how to pass options of a render engine, read this document.

Styles

To use default styles based on SAP Fundamentals, import them as follows:

import "@kyma-project/dc-markdown-render-engine/lib/styles.css";

To use the default font 72 provided by SAP Fundamentals, install the npm package from this Getting Started guide and import the font as follows:

import "fiori-fundamentals/dist/fonts.min.css";

Plugins

To use plugins available in the package, import the plugins object from the package. See the following example:

import { plugins as markdownPlugins } from "@kyma-project/dc-markdown-render-engine";

Name	Type	Source types	Description
embedVideo	mutation	["markdown", "md"]	A mutation plugin to extract videos. The pattern for embedding a video is: {platform}: {url}, where {url} is the URL to the video, and {platform} is one of the following: youtube, vimeo, videopress, twitch, twitchlive, niconico. NOTE: To fully integrate with the Documentation component you must also use markdownEmbedVideoParserPlugin
frontmatter	mutation and extractor	["markdown", "md"]	Mutation and extractor plugins. The mutation plugin removes Front Matter from the beginning of a Markdown file. The extractor plugin extracts file metadata from a Markdown file.
headers	extractor	["markdown", "md"]	An extractor plugin to extract headers from a Markdown file.
replaceAllLessThanChars	mutation	["markdown", "md"]	A mutation plugin to replace every < char to an appropriate Unicode character. Used the plugin to render chars properly.
tabs	mutation	["markdown", "md"]	A mutation plugin to extract the details HTML tag in order to have fully interactive tabs. NOTE: To integrate fully with the Documentation component you must also use tabsParserPlugin.

NOTE: To learn how to pass options of a plugin, read this document.

TypeScript types

To use TypeScript types available in the package, import the types object from the package. See the following example:

import { types as markdownRETypes } from "@kyma-project/dc-markdown-render-engine";