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

npm i @cartamd/plugin-code

Import the default styles:

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

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. Remember to also have it loaded into the highlighter, by specifying it in shikiOptions.

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

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

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

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

<MarkdownEditor {carta} />

Checkout the docs for examples, options and more.