Markdown 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 only renders links if they begin with https:, http:, mailto:, or /.

**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)

Kitchen sink

This example shows of all the styling and markup possibilities. It is mostly used for testing.

Props

EuiMarkdownFormat

Extends HTMLAttributes


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. @see aria-labelledby. Type: `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 `hex`, `rgb` or `rgba` value. Type: `"accent" \| "success" \| "warning" \| "danger" \| "default" \| Color \| "subdued" \| "ghost"`	Default value `default`
Prop textAlign#	Description and type Applies horizontal text alignment Type: `"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. Use with care when nesting multiple components to ensure valid XHTML: `<div>` and other block tags are not valid to use inside `<p>`. If using the `<p>` tag, we recommend passing strings/text only. `<span>` is valid to be nested in any tag, and can have any tag nested within it. Type: `"div" \| "p" \| "span"`	Default value
Prop parsingPluginList#	Description and type array of unified plugins to parse content into an AST Type: `PluggableList`	Default value `getDefaultEuiMarkdownParsingPlugins()`
Prop processingPluginList#	Description and type array of unified plugins to convert the AST into a ReactNode Type: `PluggableList`	Default value `getDefaultEuiMarkdownProcessingPlugins()`
Prop textSize#	Description and type Determines the text size. Choose `relative` to control the `font-size` based on the value of a parent container. Type: `"xs" \| "s" \| "m" \| "relative"`	Default value `m`