2.0.11 • Public • Published


    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.


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


    • 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!'} />
                # Yay markdown!
                ## works

    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 (
                children="# Nope. Ignored."

    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">

    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) => {
            .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


    • 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


    npm i @loopmode/markdown

    DownloadsWeekly Downloads






    Unpacked Size

    24.9 kB

    Total Files


    Last publish


    • loopmode