⚛️ Drop in markdown rendering and syntax highlighting for React.
React Smackdown is the easiest way to render markdown as html in React. With a single component and string of markdown, you get server-side-compatible JSX, complete with syntax highlighting. This is made possible with the following amazing libraries:
# yarn
$ yarn add react-smackdown
# npm
$ npm install --save react-smackdown
<Markdown>
Use the <Markdown>
component to render markdown and also handle syntax highlighting automatically.
Props:
source: String (Required)
- The markdown string you want to renderrenderers: Object
- An object of optional renderers ({tag: component}
), used to render any tags encountered in the markdown.markdownConfig: Object
- An optional configuration object for the underlying showdown
instance.syntax: Object
- Optional props that will be forwarded to the Code
component for any syntax in the markdownhighlightInline: Boolean
- Defaults to true
. If true
, will also highlight any inline code blocks.import { Markdown, loadLanguages } from 'react-smackdown'
// Import any non-default RePrism languages you need:
import jsx from 'reprism/languages/jsx'
import bash from 'reprism/languages/bash'
import go from 'reprism/languages/go'
// Import any Prism-compatible theme. We even have our own "smackdown" themes!
import 'smackdown/themes/smackdown-dark.css'
// or 'smackdown/themes/smackdown-light.css'
// Load the languages into smackdown (via RePrism)
loadLanguages(jsx, bash, go)
const someMarkdown = `
# Hello!
This is some **markdown** with some code!
```javascript
const foo = 'bar'
```
```jsx
const foo = <div>Hello!</div>
```
```bash
$ npm install react-smackdown
```
```go
package main
import "fmt"
func main() {
fmt.Println("hello world")
}
```
`
<Markdown
source={someMarkdown}
/>
The above code would produce this markdown:
Hello!
This is some markdown with some code!
const foo = "bar";
const foo = <div>Hello!</div>;
$ npm install react-smackdown
package main import "fmt" func main() { fmt.Println("hello world") }
If you want to use your own components to render markdown, it's easy! Just provide an object of tag-to-component values to the renderers
prop.
Important Note: If you override the pre
or code
tag renderers, you will most likely break the automatic syntax highlighting!
import { Markdown } from "smackdown";
const renderers = {
a: ({ href, ...rest }) => <Link to={href} {...rest} />
}
<Markdown
source={someMarkdown}
renderers={renderers}
/>;
<Code>
If you don't need to render any markdown, but still want syntax highlighting, you can use the <Code>
component directly!
Props:
source: String (Required)
- The code string you want to highlight and renderlanguage: String (Recommended)
- Defaults to markup
. The reprism
language you want to use to highlight the source.component: String | Component
- Defaults to pre
The component you want to use to render the outer element. Change this to code
if you need to do inline rendering of code.showLineNumbers: Boolean
- Defaults to true
import { Code } from "smackdown";
const source = `
const foo = 'bar'
if (foo) {
console.log('I has foo!')
}
`
<Code
source={source}
language='javascript'
/>;
The above example would produce this code block:
const foo = "bar";
if (foo) {
console.log("I has foo!");
}