How to get the language for syntax highlight?

[echo forge]

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

---

Astro supports syntax highlighting for various languages through its built-in support for Shiki and Prism.

For Shiki, you can configure the languages via the shikiConfig object in your astro.config.mjs file. Shiki has countless built-in languages, including .astro. Here's an example of how to configure it:

import { defineConfig } from 'astro/config';
export default defineConfig({ 
  markdown: { 
    shikiConfig: { 
      langs: [], // Add your languages here
      wrap: true, 
    }, 
  },
});

Source (https://docs.astro.build/en/guides/markdown-content#syntax-highlighting)

For Prism, you can use the <Prism /> component and specify the language with the lang prop. Note that you need to install the @astrojs/prism package and provide a Prism CSS stylesheet for syntax highlighting to appear. Here's an example of how to use it:

import { Prism } from '@astrojs/prism';
<Prism lang="js" code={`const foo = 'bar';`} />

Source (https://docs.astro.build/en/reference/api-reference#prism-)

You can visit the list of languages supported by Prism (https://prismjs.com/#supported-languages) for options and usage.

If you're using a custom language, you can import the language JSON file and pass it to the langs option in your astro.config.js file:

import customLang from './custom.tmLanguage.json'
export default defineConfig({ 
  markdown: { 
    shikiConfig: { 
      langs: [ 
        { path: '../../custom.tmLanguage.json' }, 
        customLang, 
      ], 
    }, 
  },
})

Source (https://docs.astro.build/en/guides/upgrade-to/v4#removed-shiki-language-path-property)

Please note that Astro v4.0 removes support for the path property of a Shiki language, which was confusing to configure. It is replaced by an import which can be passed to langs directly.

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

@cedar cosmos kapa.ai is still learning and improving, please let us know how it did by reacting below

[cedar cosmos]

@echo forge How to add the language to the class name of pre tags for syntax highlight?

[echo forge]

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

---

To add the language to the class name of pre tags for syntax highlighting, you can add a data-lang attribute to the pre tag and then use CSS to render the label. Here's an example:

<pre data-lang="html" is:raw class="astro-code" style="..">
  <code>..</code>
</pre>

And using CSS, you can render the label:

.prose pre::before {
  content: attr(data-lang);
  position: absolute;
  right: 0.4rem;
  top: 0.4rem;
  ..
}

This will add a label to the top right of your code block indicating the language used.

Please note that this solution was proposed in a GitHub issue (https://github.com/withastro/astro/issues/6869) and might not be officially supported by Astro. Always test thoroughly to ensure it works as expected in your specific use case.

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