@loopmode/markdown

    2.0.11 • Public • Published

    @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

    Install

    npm i @loopmode/markdown

    DownloadsWeekly Downloads

    4

    Version

    2.0.11

    License

    MIT

    Unpacked Size

    24.9 kB

    Total Files

    18

    Last publish

    Collaborators

    • loopmode