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