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