astrohacker-md

astrohacker-md

This is a fork of markdown-to-jsx that adds support for block- and inline-level mathematics to markdown files using span tags that can be rendered with KaTeX inside a browser as well as other features used by Astrohacker.

An example of how to use this library inside your Remix project to support math and links is as follows:

import Markdown from 'remix-markdown-katex'
import { Link } from '@remix-run/react'
import { InlineMath, BlockMath } from 'react-katex'

const MyLink = ({ children, ...props }) =>
  props.href.startsWith('https://') || props.href.startsWith('http://') ? (
    <a {...props} target="_blank">
      {children}
    </a>
  ) : props.href.startsWith('/') ? (
    <Link {...props} to={props.href}>
      {children}
    </Link>
  ) : (
    <Link {...props} to={'../' + props.href}>
      {children}
    </Link>
  )

const MySpan = ({ children, ...props }) =>
  props.className === 'inline-math' ? (
    <InlineMath {...props}>{children}</InlineMath>
  ) : props.className === 'block-math' ? (
    <BlockMath {...props}>{children}</BlockMath>
  ) : (
    <span {...props}>{children}</span>
  )

const MyMarkdown = props => {
  return (
    <Markdown
      {...props}
      options={{
        disableParsingRawHTML: true,
        overrides: {
          a: {
            component: MyLink,
          },
          span: {
            component: MySpan,
          },
        },
      }}
    >
      {props.children}
    </Markdown>
  )
}

export default MyMarkdown