OpenApi render engine for @kyma-project/documentation-component
npm install @kyma-project/dc-markdown-render-engineThe Markdown render engine is based on the React Markdown component. It allows you to render .md files.
- using npm
``bash`
npm i @kyma-project/dc-markdown-render-engine
- using yarn
`bash`
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[]](./src/types.ts#L24) | [] | 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:
`js`
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:
`js`
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:
`js`
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:
`js``
import { types as markdownRETypes } from "@kyma-project/dc-markdown-render-engine";