Seamlessly embed markdown into JSX
This library provides React component for embeding markdown into JSX using tagged template literals ES6 feature.
Usage
import React from 'react'import Markdown from 'jsx-markdown' Component { thisstate = counter: 0 } { return Markdown` # Hello world This is markdown paragraph. You can inline JavaScript variables as shown below. Counter is equal You can even render React components: ` } { this }
Remarks
- HTML tags are not supported in markdown. If you need to render HTML use the following syntax:
Markdown` This is markdown. `
- Indentation is removed automatically. It means the following two are equivalent:
Markdown`First lineAnothe line`
Markdown` First line Anothe line`
- Because backtick character has to be escaped in template literals the component introduces some special syntax for convenience. Two quotation marks in a row are replaced with single backtick and three quotatiom marks in a row are repaced with three backticks.
Markdown` ''variable'' is equivalent to \`variable\`.`
Markdown` '''js console.log(1) ''' is equivalent to \`\`\`js console.log(1) \`\`\``
Project status
This component is used as a convenient markdown formatting in my another project. Functionalities are added as needed. It means at the current stage this component doesn't handle some basic markdown formatting.
If you miss some functionality feel free to raise an issue or create a pull request.