漫画代码插件

此插件增加了代码块的支持 语法突出显示. 它使用核心包(Shiki)中相同的亮点.

npm i @cartamd/plugin-code

设置

样式

导入默认样式 :

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

使用默认突出显示器

Carta带有一个默认的突出显示器,该突出显示器与编辑器中用来突出标记的突出显示相匹配,并默认使用(Shiki). 如果您想要使用不同于用于突出显示Markdown的主题,可以在选项中指定. 记得把它加载到亮点中,用 shikiOptions。 。 。 .

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

使用自定义显示器

在此插件中无法指定自定义突出显示符 。 然而,有许多不同的 标记插件 提供语法加亮.

延长

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

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

<MarkdownEditor {carta} />

文档

检查 文档 用于实例、选项和其他.