Overview

Syntax highlighting of code blocks is easily accomplished through the use of relevant rehype plugins that are explored in the sections below. In most situations, you also need to apply custom Sanitzation schemas to whitelist stylistic properties introduced from syntax highlighters.

`rehype-highlight`

Syntax highlighting is done through the rehype-highlight plugin, which uses highlight.js under the hood. Please refer to the plugin documentation for configuations.

Live Code Editor

// import { createElement } from 'react';
// import rehypeHighlight from 'rehype-highlight';
// import rehype2react from 'rehype-react';
// import Doc from 'unified-doc';

// import './highlight-github.css'; // supply a custom highlight.js stylesheet

function() {
  const doc = Doc({
    compiler: [[rehype2react, { createElement }]],
    content: `
      function greet() {
        return "hello world";
      }`,
    filename: 'doc.js',
    prePlugins: [[rehypeHighlight, { ignoreMissing: true }]],
    sanitizeSchema: {
      attributes: {
        '*': ['className', 'style'],
      },
      clobberPrefix: '',
    },
  });

  return <div>{doc.compile().result}</div>
}

// import { createElement } from 'react';
// import rehypeHighlight from 'rehype-highlight';
// import rehype2react from 'rehype-react';
// import Doc from 'unified-doc';
// import './highlight-github.css'; // supply a custom highlight.js stylesheet
function() {
  const doc = Doc({
    compiler: [[rehype2react, { createElement }]],
    content: `
      function greet() {
        return "hello world";
      }`,
    filename: 'doc.js',
    prePlugins: [[rehypeHighlight, { ignoreMissing: true }]],
    sanitizeSchema: {
      attributes: {
        '*': ['className', 'style'],
      },
      clobberPrefix: '',
    },
  });
  return <div>{doc.compile().result}</div>
}

Preview


      function greet() {
        return "hello world";
      }

`rehype-prism`

Syntax highlighting is done through the rehype-prism plugin, which uses prism.js under the hood. Please refer to the plugin documentation for configuations.

Live Code Editor

// import { createElement } from 'react';
// import rehypeHighlight from 'rehype-highlight';
// import rehype2react from 'rehype-react';
// import Doc from 'unified-doc';

// import './prism-github.css'; // supply a custom prism.js stylesheet

function() {
  const doc = Doc({
    compiler: [[rehype2react, { createElement }]],
    content: `
      function greet() {
        return "hello world";
      }`,
    filename: 'doc.js',
    prePlugins: [[rehypePrism, { ignoreMissing: true }]],
    sanitizeSchema: {
      attributes: {
        '*': ['className', 'style'],
      },
      clobberPrefix: '',
    },
  });

  return <div>{doc.compile().result}</div>
}

// import { createElement } from 'react';
// import rehypeHighlight from 'rehype-highlight';
// import rehype2react from 'rehype-react';
// import Doc from 'unified-doc';
// import './prism-github.css'; // supply a custom prism.js stylesheet
function() {
  const doc = Doc({
    compiler: [[rehype2react, { createElement }]],
    content: `
      function greet() {
        return "hello world";
      }`,
    filename: 'doc.js',
    prePlugins: [[rehypePrism, { ignoreMissing: true }]],
    sanitizeSchema: {
      attributes: {
        '*': ['className', 'style'],
      },
      clobberPrefix: '',
    },
  });
  return <div>{doc.compile().result}</div>
}

Preview


      function greet() {
        return "hello world";
      }

Highlighting explicitly parsed content as source code

By default, unified-doc will auto-assign parsers based on inferred mime-type from the filename. This means that parsers supporting various content types (e.g. .html, .md) will not render its contents as source code in a code block. To explicitly render such content type as source code, disable the parser by assigning null to its corresponding mime type.

Live Code Editor

// import { createElement } from 'react';
// import rehypeHighlight from 'rehype-highlight';
// import rehype2react from 'rehype-react';
// import Doc from 'unified-doc';

// import './prism-github.css'; // supply a custom prism.js stylesheet

function() {
  const doc = Doc({
    compiler: [[rehype2react, { createElement }]],
    content: '<blockquote><strong>some</strong> markdown content</blockquote>',
    filename: 'doc.html',
    parsers: {
      'text/html': null,
    },
    prePlugins: [[rehypePrism, { ignoreMissing: true }]],
    sanitizeSchema: {
      attributes: {
        '*': ['className', 'style'],
      },
      clobberPrefix: '',
    },
  });

  return <div>{doc.compile().result}</div>
}

// import { createElement } from 'react';
// import rehypeHighlight from 'rehype-highlight';
// import rehype2react from 'rehype-react';
// import Doc from 'unified-doc';
// import './prism-github.css'; // supply a custom prism.js stylesheet
function() {
  const doc = Doc({
    compiler: [[rehype2react, { createElement }]],
    content: '<blockquote><strong>some</strong> markdown content</blockquote>',
    filename: 'doc.html',
    parsers: {
      'text/html': null,
    },
    prePlugins: [[rehypePrism, { ignoreMissing: true }]],
    sanitizeSchema: {
      attributes: {
        '*': ['className', 'style'],
      },
      clobberPrefix: '',
    },
  });
  return <div>{doc.compile().result}</div>
}

Preview

<blockquote><strong>some</strong> markdown content</blockquote>