Markdown Render Engine

Overview

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

using npm

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

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

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.

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";

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.

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";