Code Highlighting

In the typography plugins we have a built in code block. It is fully functional, but it does not have code highlighting for any language. This may be ok for your use case, but if you noticed from this documentation, our code is highlighted.

So in this section, we’ll walk through how to enable syntax highlighting in Magicube using the highlight plugin and Prism.js.

Editor Setup

First things first, let's install the plugin:

npm install @magicube/editor-highlight-code-plugin

To enable syntax highlighting in the editor, you’ll need to add the makeHighlightCodeBlockPlugin alongside the typography blocks and include the relevant Prism CSS styles for your supported languages.

"use client";

import { Document, Editor, createMagicubeEditor } from "@magicube/editor";
import { makeBlocks, makeMarks } from "@magicube/editor-typography-plugins";
import { makeHighlightCodeBlockPlugin } from "@magicube/editor-highlight-code-plugin";

import "@magicube/editor/styles.css";
import "@magicube/editor-typography-plugins/styles.css";

import "prismjs/themes/prism.css";
import "prismjs/components/prism-typescript";
import "prismjs/components/prism-javascript";
import "prismjs/components/prism-jsx";
import "prismjs/components/prism-css";
import "prismjs/components/prism-json";
import "prismjs/components/prism-bash";

const editor = createMagicubeEditor({
  plugins: {
    blocks: [...makeBlocks(), makeHighlightCodeBlockPlugin()],
    marks: makeMarks(),
  },
});

 // const initialDocument: Document = { ... };

function CodeHighlightEditor() {
  return (
    <Editor
      editor={editor}
      initialValue={initialDocument}
      onChange={(document) => {
        console.log(JSON.stringify(document, null, 2));
      }}
    />
  );
}

export default CodeHighlightEditor;

Make sure to include the Prism CSS styles for the following languages: JavaScript, TypeScript, JSX, CSS, JSON, and Bash.

code-highlight-plugin

Live Example Code

Readonly Page Setup

For readonly views, you need to load prism alongside with your page to activate highlight.

If you're using Next.js, load the <PrismNextLoader /> component alongside <Viewer /> due to dynamic rendering requirements:

"use client";

import { createMagicubeViewer, Document, Viewer } from "@magicube/editor";
import { PrismNextLoader } from "@magicube/editor-highlight-code-plugin";

const viewer = createMagicubeViewer({
  plugins: {
    blocks: [...makeBlocks(), makeHighlightCodeBlockPlugin()],
    marks: makeMarks(),
  },
});

export function DocumentView({ document }: Props) {
  return (
    <>
      <PrismNextLoader />
      <Viewer document={document} viewer={viewer} />
    </>
  );
}

type Props = {
  document: Document;
};

For other frameworks or simple setups, use <PrismLoader /> instead.

"use client";

import { createMagicubeViewer, Document, Viewer } from "@magicube/editor";
import { PrismLoader } from "@magicube/editor-highlight-code-plugin";

const viewer = createMagicubeViewer({
  plugins: {
    blocks: [...makeBlocks(), makeHighlightCodeBlockPlugin()],
    marks: makeMarks(),
  },
});

export function DocumentView({ document }: Props) {
  return (
    <>
      <PrismLoader />
      <Viewer document={document} viewer={viewer} />
    </>
  );
}

type Props = {
  document: Document;
};

Next section we are going to implement Equation block with TeX rendering support.

Image Equation