Nerdiest Political Manifesto

    remark-react-codemirror

    1.1.2 • Public • Published

    remark-react-codemirror

    build status

    Syntax highlighting for remark-react through CodeMirror.

    Usage

    import remark from "remark";
    import gfm from "remark-gfm";
    import reactRenderer from "remark-react";
    import sanitizeGhSchema from "hast-util-sanitize/lib/github.json";
    
    import CodeMirror from "codemirror";
    import "codemirror/mode/meta";
    import "codemirror/addon/runmode/runmode";
    import "codemirror/mode/javascript/javascript";
    import highlighter from "remark-react-codemirror";
    
    const schema = Object.assign({}, githubSchema, {
      attributes: Object.assign({}, githubSchema.attributes, {
        code: [...(githubSchema.attributes.code || []), "className"],
      }),
    });
    
    remark()
      .use(gfm)
      .use(reactRenderer, {
        sanitize: schema,
        remarkReactComponents: {
          code: highlighter(CodeMirror, { theme: "solarized" }),
        },
      })
      .processSync(readme).result;

    Notes

    • The default santization schema (GitHub's) excludes className, but we want those cm-* classes for our highlighting! Hence the custom object passed to santization.
    • You'll need stylings for the classes that CodeMirror adds. You can choose from a bunch bunch of pre-made stylesheets.

    License

    MIT. Developed by Takuya Matsuyama hi@craftz.dog

    Install

    npm i remark-react-codemirror

    DownloadsWeekly Downloads

    5

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    10.2 kB

    Total Files

    12

    Last publish

    Collaborators

    • avatar