Nonchalantly Perusing Magazines

    @remirror/extension-code-block
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.5 • Public • Published

    @remirror/extension-code-block

    Unleash the inner coder with code blocks for your remirror editor.

    Version Weekly Downloads Bundled size Typed Codebase MIT License

    Installation

    yarn add refractor @remirror/extension-code-block # yarn
    pnpm add refractor @remirror/extension-code-block # pnpm
    npm install refractor @remirror/extension-code-block # npm

    This is included by default when you install the recommended remirror package. All exports are also available via the entry-point, remirror/extensions.

    Refractor is a peer dependency and must be installed to consume the package properly.

    Usage

    The following code sample will create a limited editor and run the available commands from this extension.

    import jsx from 'refractor/lang/jsx';
    import typescript from 'refractor/lang/typescript';
    import { ExtensionPriority, RemirrorManager } from 'remirror';
    import { CodeBlockExtension, CorePreset } from 'remirror/extensions';
    
    // Create the codeBlock extension
    const codeBlockExtension = new CodeBlockExtension({ supportedLanguages: [typescript, jsx] });
    const corePreset = new CorePreset();
    
    // Create the Editor Manager with the codeBlock extension passed through.
    const manager = RemirrorManager.create([codeBlockExtension, corePreset]);
    
    // Pass the dom element to the editor. If you are using `@remirror/react` or
    // other framework wrappers then this is handled for you.
    const element = document.createElement('div');
    document.body.append(element);
    
    // Add the view to the editor manager.
    manager.addView(element);
    
    // Access the code block commands
    manager.store.commands.createCodeBlock({ language: 'markdown' });
    
    // Also supports chaining
    manager.store.chain.updateCodeBlock({ language: 'js' }).formatCodeBlock().run();

    Formatter

    If you would like to format code, you can import from the @remirror/extension-code-block/formatter endpoint.

    The formatter requires prettier@2 to be installed as a peer dependency.

    Install

    npm i @remirror/extension-code-block

    DownloadsWeekly Downloads

    10,383

    Version

    2.0.5

    License

    MIT

    Unpacked Size

    211 kB

    Total Files

    19

    Last publish

    Collaborators

    • ocavue
    • ifiokjr