Code

This plugin adds support for code blocks syntax highlighting. It uses the same highlighter from the core package(Shiki).

Installation

npm i @cartamd/plugin-code

Setup

Styles

Import the default styles:

import '@cartamd/plugin-code/default.css';

Using the default highlighter

Carta comes with a default highlighter that matches the one used to highlight markdown in the editor and is used by default (Shiki). If you want to use a theme different from the one used to highlight Markdown, you can specify it in the options.

const carta = new Carta({
  // ...
  extensions: [
    code({
      theme: 'ayu-light'
    })
  ]
});

Using a custom highlighter

It is no longer possible to specify a custom highlighter in this plugin. However, there are many different Remark plugins that provide syntax highlighting.

Extension

<script>
  import { Carta, MarkdownEditor } from 'carta-md';
  import { code } from '@cartamd/plugin-code';

  const carta = new Carta({
    extensions: [code()]
  });
</script>

<MarkdownEditor {carta} />

Options

The options you can pass to code() extend the ones provided by Shiki.