Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/**
*
* Markdown
*
*/
import React from 'react'
import Smackdown from 'react-smackdown'
import ruby from 'react-syntax-highlighter/dist/languages/hljs/ruby'
import javascript from 'react-syntax-highlighter/dist/languages/hljs/javascript'
import shell from 'react-syntax-highlighter/dist/languages/hljs/shell'
import diff from 'react-syntax-highlighter/dist/languages/hljs/diff'
import elixir from 'react-syntax-highlighter/dist/languages/hljs/elixir'
import atomOneLight from 'react-syntax-highlighter/dist/styles/hljs/atom-one-light'
import Wrapper from './Wrapper'
const syntax = {
languages: [
{ name: 'ruby', syntax: ruby },
{ name: 'javascript', syntax: javascript },
{ name: 'shell', syntax: shell },
{ name: 'diff', syntax: diff },
{ name: 'elixir', syntax: elixir },
{ name: 'shell', syntax: shell },
{ name: 'sh', syntax: shell }
],
showLineNumbers: true,
lineNumberStyle: { opacity: 0.5 },
theme: atomOneLight
}
const Markdown = ({ text, className }) => (
<Wrapper className={className}>
<Smackdown
syntax={syntax}
source={text}
renderers={{
a: ({ href, children }) =>
<a href={href} rel="noopener noreferrer" target="_blank">{children}</a>
}}
/>
</Wrapper>
)
export default Markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment