@loopmode/markdown

A react component for displaying markdown content with code highlighting.

Uses react-remarkable and prismjs (via @codeblock/react) under the hood.

Any code blocks in the markdown content will have syntax highlighting applied.

Installation

yarn add @loopmode/markdown
# or via npm
npm install --save @loopmode/markdown

Usage

You can pass a string of markdown content directly via children.
Alternatively, you can specify a src prop and have the content loaded from that URL
Pass options for remarkable with the remarkableOptions prop
Pass providers for @codeblock/react with the codeblockProviders props
You can change the prismjs theme used by codeblock with the prismTheme prop

Inline content

Note: The children value should be a String

import React from 'react';
import Markdown from '@loopmode/markdown';

export default function InlineContent() {
    return (
        <>
            <Markdown>{'# Yay markdown!'}</Markdown>
            <Markdown children={'# Yay markdown!'} />
            <Markdown>{'
            # Yay markdown!
            ## works
            '}
            </Markdown>
        </>
    );
}

External content

If you specify src, the content will be loaded from that URL and the children prop is ignored.

import React from 'react';
import Markdown from '@loopmode/markdown';

export default function ExternalContent() {
    return (
        <Markdown
            children="# Nope. Ignored."
            src="https://raw.githubusercontent.com/facebook/react/master/README.md"
        />
    );
}

Example: embedded README

Uses raw.macro to embed the contents of a local markdown file and renders it, using a dark theme for syntax highlighing:

import React from 'react';
import Markdown from '@loopmode/markdown';
import raw from 'raw.macro';
const ReadmeSource = raw('../../README.md');

export default function ThemedReadme() {
    return (
        <Markdown prismTheme="okaidia">
            {ReadmeSource}
        </Markdown>
    );
}

Note: raw.macro is pretty cool - you can embed files from outside the src folder!

window.fetch and custom loader

Auto-loading content via src uses window.fetch() by default. If you need to support older browsers, you can either provide a fetch polyfill or a custom loader function.

A custom loader function is pretty easy to create:

const loader = (url, callback) => {
    axios.get(url)
        .then(response => callback(response.data));
}

The signature is (url: String, callback: Function): Function
Invoke the callback with the result string once you have it
Optionally return a function

The loader may return a function to cancel pending requests when the requesting component gets unmounted. For example, using axios, it would be something like this:

const loader = (url, callback) => {
    const {token: cancelToken, cancel} = axios.CancelToken.source();
    axios.get(url, {cancelToken})
        .then(response => callback(response.data));
    return cancel
}

Requirements

Requires react version 16.8.6 or newer (hooks support)
Your project should support dynamic import() statements so that prismjs languages can be loaded on-demand
You should not use multiple prismjs themes, because its global stylesheets will interfere with each other