Format
EuiMarkdownFormat is a read-only way to render markdown-style content in a page. It is a peer component to EuiMarkdownEditor and has the ability to be modified by additional markdown plugins.
Built in plugins
EuiMarkdownFormat is a wrapper that will render Markdown provided. EuiMarkdownFormat uses Remark by default. The translation layer automatically substitutes raw HTML output with their EUI equivalent. This means anchor, code blocks and horizontal rules will become EuiLink, EuiCodeBlock and EuiHorizontalRule components respectively.
Text sizing and coloring
EuiMarkdownFormat uses EuiText as a wrapper to handle all the CSS styling when rendering the HTML. It also gives the ability to control the text size and color with the textSize and color props, respectively.
Link validation for security
Markdown content often comes from untrusted sources like user generated content. To help with potential security issues, EuiMarkdownRenderer by default only renders links if they begin with https:, http:, mailto:, or /.
text code block:**Links starting with http:, https:, mailto:, and / are valid:** * https://elastic.co * http://elastic.co * https link to [elastic.co](https://elastic.co) * http link to [elastic.co](http://elastic.co) * relative link to [eui doc's homepage](/) * someone@elastic.co * [email me!](mailto:someone@elastic.co) **Other link protocols are kept as their markdown source:** * ftp://elastic.co * An [ftp link](ftp://elastic.co)
By default, the link validator will not render document-relative links which do not begin with a protocol or a /, such as:
text code block:* Linking to a [page with the same current base path](editor) * Linking to a [page above this current path](../../../templates/page-template)
If you want to allow document-relative links while preserving the security benefits of restricting protocols, use the allowDocumentRelative option when
configuring the default plugins.
Kitchen sink
This example shows of all the styling and markup possibilities. It is mostly used for testing.
Props
EuiMarkdownFormat
Prop | Description and type | Default value |
|---|---|---|
Prop className# | Description and type Type: string | Default value |
Prop aria-label# | Description and type Defines a string value that labels the current element. string | Default value |
Prop data-test-subj# | Description and type Type: string | Default value |
Prop css# | Description and type Type: Interpolation<Theme> | Default value |
Prop color# | Description and type Any of our named colors or a "default" | Color | "subdued" | "accent" | "accentSecondary" | "success" | "warning" | "danger" | "ghost" | Default value default |
Prop textAlign# | Description and type Applies horizontal text alignment "center" | "left" | "right" | Default value left |
Prop grow# | Description and type Type: boolean | Default value |
Prop component# | Description and type The HTML element/tag to render.
"div" | "p" | "span" | Default value |
Prop parsingPluginList# | Description and type array of unified plugins to parse content into an AST PluggableList | Default value getDefaultEuiMarkdownParsingPlugins() |
Prop processingPluginList# | Description and type array of unified plugins to convert the AST into a ReactNode PluggableList | Default value getDefaultEuiMarkdownProcessingPlugins() |
Prop textSize# | Description and type Determines the text size. Choose "s" | "xs" | "m" | "relative" | Default value m |