carta/packages/plugin-code
2024-04-12 08:24:46 +02:00
..
src feat: use unified+rehype for parsing markdown 2024-04-12 08:24:46 +02:00
package.json feat: use unified+rehype for parsing markdown 2024-04-12 08:24:46 +02:00
README.md docs: update docs, add migration guide 2024-04-12 08:24:46 +02:00
tsconfig.json fix: remove typescript project references 2023-11-14 18:37:19 +01:00

Carta Code Plugin

This plugin adds support for code blocks syntax highlighting. Install it using:

npm i @cartamd/plugin-code

This is done using Speed-highlight JS, which supports dynamic imports. This way, languages definitions are only imported at the moment of need.

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 lang="ts">
	import { Carta, MarkdownEditor } from 'carta-md';
	import { code } from '@cartamd/plugin-code';

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

<MarkdownEditor {carta} />

Documentation

Checkout the docs for examples, options and more.