Skip to main content
Elastic UI
Elastic UI
ComponentsPatternsContentData visualization
EUI ChangelogGitHubFigma
  • Guidelines
    • Getting started
    • Accessibility
    • Writing
    • Testing
  • Theming
    • Theme provider
    • Color mode
    • Borders
    • Breakpoints
  • Templates
    • Page template
    • Sitewide search
    • Super date picker
  • Layout
    • Accordion
    • Bottom bar
    • Flex
    • Flyout
    • Header
    • Horizontal rule
    • Modal
    • Page components
    • Page header
    • Panel
    • Popover
    • Resizable container
    • Spacer
  • Navigation
    • Breadcrumbs
    • Button
    • Collapsible nav
    • Context menu
    • Facet
    • Key pad menu
    • Link
    • Pagination
    • Side nav
    • Steps
    • Tabs
    • Tree view
  • Display
    • Aspect ratio
    • Avatar
    • Badge
    • Callout
    • Card
    • Comment list
    • Description list
    • Drag and drop
    • Empty prompt
    • Health
    • Icons
    • Image
    • List group
    • Loading
    • Progress
    • Skeleton
    • Stat
    • Text
    • Timeline
    • Title
    • Toast
    • Tooltip
    • Tour
  • Forms
    • Auto refresh
    • Color selection
    • Combo box
    • Compressed forms
    • Date picker
    • Expression
    • Filter group
    • Form controls
    • Form layouts
    • Form validation
    • Inline edit
    • Range sliders
    • Search bar
    • Selectable
    • Selection controls
    • Super select
  • Tabular content
    • Data grid
    • Data grid advanced
    • Data grid cells & popovers
    • Data grid schema & columns
    • Data grid style & display
    • Data grid toolbar
    • In-memory tables
    • Tables
  • Editors & Syntax
    • Code
    • Markdown editor
    • Markdown format
    • Markdown plugins
  • Elastic Charts
    • Accessibility features
    • Categorical
    • Creating charts
    • Metric Chart
    • Part to whole comparisons
    • Sizing
    • Time series
  • EUI
  • Editors & Syntax
  • Markdown format

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.

Loading...

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.

Loading...

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.com
* http://elastic.com
* 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)
Loading...

Kitchen sink

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

Loading...
Edit this page
Previous
Markdown editor
Next
Markdown plugins
  • Built in plugins
  • Text sizing and coloring
  • Link validation for security
  • Kitchen sink
EUI is dual-licensed under Elastic License 2.0 and Server Side Public License, v 1 | Crafted with ❤ by Elastic