Naval Pilgrim's Mayflower

    @loopmode/codeblock

    1.0.3 • Public • Published

    @loopmode/codeblock

    A react component for code highlighting - based on prismjs and prepared for code-splitting.

    • Note: Requires react version 16.8.0 or newer (hooks)
    • Note: Requires support for dynamic import() statements (e.g. create-react-app/webpack/parcel)

    Installation

    yarn add @loopmode/codeblock
    # or
    npm install --save @loopmode/codeblock

    Usage

    The default prism theme is okaidia, the default language is javascript. Use the theme and language props to override.

    Currently, you have to decide on a single theme because the global prism stylesheets interfere with each other. See local themed component for how to specify a theme.

    Displaying inline content

    You can use the component much like you would use the <pre> tag. Pass the contents as regular react children.

    import React from 'react';
    import Codeblock from '@loopmode/codeblock'
    
    export default function InlineContent() {
        return (
            <Codeblock>{`class Foo { /* Yay! Code! */ }`}</Codeblock>
        );
    }

    Loading 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 Codeblock from '@loopmode/codeblock'
    
    export default function ExternalContent() {
        return (
            <Codeblock
                children="Nope. Ignored."
                src="https://raw.githubusercontent.com/loopmode/codeblock/master/packages/codeblock/src/Codeblock.js"
            />
        );
    }

    Local themed component

    Currently, each prism theme stylesheet is loaded globally. When you load a second theme, the first one is still loaded and the styles interfere. For this reason, you should decide for one theme and stick with it.

    While you could just set the theme prop manually over and over, you should create a local component that sets the theme prop once and import that one across your codebase.

    Example components/Codeblock:

    import React from 'react';
    import Codeblock from '@loopmode/codeblock'
    
    export default function ThemedCodeblock(props) {
        return (
            <Codeblock {...props} theme="twilight" />
        );
    }

    Code splitting

    All default prismjs themes and languages are supported and loaded with dynamic import() statements that use /* webpackChunkName */ comments. When you build your app for production, your final bundle will contain an additional codeblock folder with the theme and language files (codeblock/theme.*.js and codeblock/language.*.js).

    However, only the required ones will be loaded at runtime.

    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
    }

    Install

    npm i @loopmode/codeblock

    DownloadsWeekly Downloads

    3

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    133 kB

    Total Files

    42

    Last publish

    Collaborators

    • loopmode