Customize syntax highlighting using the plugin

[yishiyuntuan]

I want to use a plugin in Vue3 to achieve custom code syntax highlighting, following the example in the documentation, but it's not working. How can I modify the code to make it work?

The code theme is still the default onedark

<script setup>
import { Milkdown, useEditor } from "@milkdown/vue";
import { Crepe } from "@milkdown/crepe";
import { getMarkdown, replaceAll } from "@milkdown/kit/utils";
import { defaultConfig } from '@milkdown/components/code-block'
import { v4 as uuidv4 } from 'uuid';
import mermaid from "mermaid/dist/mermaid.esm.mjs";
import "@milkdown/crepe/theme/common/style.css";
import "@milkdown/crepe/theme/nord.css";
// import { oneDark } from '@codemirror/theme-one-dark'

import { milkShiki } from "./shiki";

mermaid.initialize({
    startOnLoad: false,
    theme: 'default',
});

const markdown = `# Milkdown Vanilla Shiki Highlight

> You're scared of a world where you're needed.

\`\`\`ts
Editor
  .make()
  .config(ctx => {
    ctx.set(rootCtx, '#app')
    ctx.set(defaultValueCtx, markdown)
  })
  .config(nord)
  .use(commonmark)
  .use(milkShiki)
  .create()
\`\`\`

This is a demo for using Milkdown with **Vanilla Typescript**.
The code block is highlighted by [shiki](https://shiki.matsu.io/).`;


function renderSvg(divId, mermaidContent) {
    const svgId = 'mermaid-svg-' + divId;
    mermaid.render(svgId, mermaidContent).then((output) => {
        const svgPanel = document.getElementById(divId);
        if (!svgPanel) {
            console.error('Mermaid渲染失败，没有找到渲染节点: .milkdown-mermaid-svg');
            return;
        }
        svgPanel.innerHTML = output.svg;
    });
}

// 新增 Mermaid 渲染函数
const renderMermaidToDom = (content) => {
    const graphId = 'mermaid-' + uuidv4();
    let dom = document.createElement('div');
    dom.id = graphId;
    (function (divId) {
        // 先验证语法,提前抛出错误, 为了增量渲染正确的部分
        // 配置了 suppressErrors = false, 当语法无效时抛出错误异常
        mermaid.parse(content, { suppressErrors: false })
            .then(() => {
                renderSvg(divId, content);
            })
            .catch((err) => {
                const previewDiv = document.getElementById(divId);
                if (previewDiv) {
                    const svgDiv = previewDiv.querySelector('div.milkdown-mermaid-svg');
                    if (!svgDiv) {
                        previewDiv.innerHTML = `<span style="color:#DC362E">语法错误: ${err.message}</span>`;
                    }
                } else {
                    console.error('>>>>> 渲染错误:', err);
                }
            });
    })(graphId);

    return dom;
}


// ✅ 在数据获取后初始化编辑器
const { get } = useEditor((root) => {
    const crepe = new Crepe({
        root,
        defaultValue: markdown,
        featureConfigs: {
            [Crepe.Feature.CodeMirror]: {
                previewToggleText: (previewActive) => previewActive ? '编辑' : '预览',
                copyText: '复制',
                renderPreview: (language, code) => {
                    if (language == "mermaid" && code.length > 0) {
                        return renderMermaidToDom(code);
                    }
                    return defaultConfig.renderPreview(language, code);
                },
            },
        }

    });
    return crepe;
});

fetch('./test.md').then(resp => resp.text()).then(text => {
    get()?.use(milkShiki).action(replaceAll(text));
})

// Use this method after loading is complete
const saveMD = () => {
    let md = get()?.action(getMarkdown());
    console.log(md);
}

</script>

<template>
    <button class="save-button" @click="saveMD()">保存</button>
    <Milkdown />
</template>
<style scoped>
/* 新增按钮样式 */
.save-button {
    position: fixed;
    right: 20px;
    bottom: 20px;
    padding: 8px 16px;
    background: #42b983;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.save-button:hover {
    background: #33a06f;
}


.cm-gutterElement {
    background-color: transparent;
}
</style>

shiki.js

import { createHighlighter, Highlighter } from "shiki";
import { $proseAsync } from "@milkdown/kit/utils";
import { Node } from "@milkdown/kit/prose/model";
import { Plugin, PluginKey } from "@milkdown/kit/prose/state";
import { Decoration, DecorationSet } from "@milkdown/kit/prose/view";
import { findChildren } from "@milkdown/kit/prose";
import { codeBlockSchema } from "@milkdown/kit/preset/commonmark";
import type { Ctx } from "@milkdown/kit/ctx";

function getHighlighter() {
  return createHighlighter({
    themes: ["one-light"],
    langs: ["javascript", "tsx", "typescript", "markdown","java","c"],
    langAlias: { 
      JavaScript: 'javascript',
      Java: 'java',
      C: 'c',
    },
  });
}

function getDecorations(ctx: Ctx, doc: Node, highlighter: Highlighter) {
  const decorations: Decoration[] = [];
  const children = findChildren(
    (node) => node.type === codeBlockSchema.type(ctx)
  )(doc);

  children.forEach(async (block) => {
    let from = block.pos + 1;
    const pos = block.pos;
    const size = block.node.nodeSize;
    const { language } = block.node.attrs;
    if (!language) return;
    const { tokens, rootStyle } = highlighter.codeToTokens(block.node.textContent, {
      lang: language,
      theme: highlighter.getLoadedThemes()[0]!,
    
    })


    if (rootStyle) {
      const decoration = Decoration.node(pos, pos + size, { style: rootStyle })
      decorations.push(decoration)
    }

    for (const line of tokens) {
      for (const token of line) {
        const to = from + token.content.length

        const decoration = Decoration.inline(from, to, {
          // When using `options.themes` the `htmlStyle` field will be set, otherwise `color` will be set
          style: stringifyTokenStyle(
            token.htmlStyle ?? `color: ${token.color}`,
          ),
          class: 'shiki',
        })

        decorations.push(decoration)

        from = to
      }
      from += 1
    }
  });

  return DecorationSet.create(doc, decorations);
}

function stringifyTokenStyle(token: string | Record<string, string>): string {
  if (typeof token === 'string') return token
  return Object.entries(token)
    .map(([key, value]) => `${key}:${value}`)
    .join(';')
}

export const milkShiki = $proseAsync(async (ctx) => {
  const key = new PluginKey("shiki");
  const highlighter = await getHighlighter();
  console.log("#######")

  return new Plugin({
    key,
    state: {
      init: (_, { doc }) => getDecorations(ctx, doc, highlighter),
      apply: (tr, value, oldState, newState) => {
        const codeBlockType = codeBlockSchema.type(ctx);
        const isNodeName =
          newState.selection.$head.parent.type === codeBlockType;
        const isPreviousNodeName =
          oldState.selection.$head.parent.type === codeBlockType;
        const oldNode = findChildren((node) => node.type === codeBlockType)(
          oldState.doc
        );
        const newNode = findChildren((node) => node.type === codeBlockType)(
          newState.doc
        );

        const codeBlockChanged =
          tr.docChanged &&
          (isNodeName ||
            isPreviousNodeName ||
            oldNode.length !== newNode.length ||
            oldNode[0]?.node.attrs.language !==
              newNode[0]?.node.attrs.language);

        if (codeBlockChanged) {
          return getDecorations(ctx, tr.doc, highlighter);
        }

        return value.map(tr.mapping, tr.doc);
      },
    },
    props: {
      decorations(state) {
        return key.getState(state);
      },
    },
  });
});

[Saul-Mirone]

You're using codemirror to render the code block. So you'll need add codemirror syntax highlight for mermaid. Something like https://www.npmjs.com/package/codemirror-lang-mermaid

[yishiyuntuan]

Thanks, this solution solved my problem