Custom lang grammar for shiki

[tall totem]

Hi @radiant plank. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Astro does support adding custom languages to Shiki for syntax highlighting, but the process changed in Astro v4. In previous versions, you could pass a language object with a path property, but this was removed in v4. Now, you need to import your custom grammar JSON and pass it directly to the langs array in your shikiConfig.

Your approach is almost correct, but make sure that:

1. The imported grammar object is valid and matches Shiki’s expected format.
2. The language ID you use in your Markdown code block (e.g., ```angelscript) matches the "name" or "id" property in your grammar file, as recognized by Shiki.

Here’s the relevant example from the Astro documentation:

import customLang from './custom.tmLanguage.json';

export default defineConfig({
  markdown: {
    shikiConfig: {
      langs: [
        customLang,
      ],
    },
  },
});

Note: The path property is no longer supported. You must import the grammar and pass the object directly, as shown above. Also, ensure your grammar file is a valid TextMate grammar and that the language name matches what you use in your code blocks.

Reference: Astro v4 breaking changes: Removed Shiki language path property and Markdown Options: shikiConfig.langs.

If you still see the error "Language angelscript not found, you may need to load it first", double-check that:

• The grammar file is correctly imported and included in the config.
• The language name in your code block matches the grammar’s "name" or "id".

If issues persist, your grammar file may not be compatible with Shiki, or there may be a mismatch in naming. The documentation does not provide further troubleshooting steps for custom grammars, so if these steps do not resolve your issue, you may need to consult the Shiki documentation or seek help in the Astro community channels.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@radiant plank Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[radiant plank]

The grammar file is correctly imported and included in the config.
It is
The language name in your code block matches the grammar’s "name" or "id".
It matches, you saw it yourself @tall totem

@tall totem

[tall totem]

Let me check the knowledge base for you again. One moment! :books: