smackdown.js

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