@expressive-code/plugin-collapsible-sections

A third-party plugin for Expressive Code, an engine for presenting source code on the web.

It adds a data-lang="" attribute onto the root HTML element of the code block (usually the Frame

element).

This can be styled with psuedo-elements to display the code block language to the website user.

!HTML code block in a webpage, with "html" written in the bottom right corner

Example usage

``js
// astro.config.js
import { defineConfig } from "astro/config";
import expressiveCode from "astro-expressive-code";
import { pluginDataLang } from "expressive-code-plugin-data-lang";

export default defineConfig({
integrations: [
expressiveCode({
plugins: [pluginDataLang()],
}),
],
});
`

$3

`css
.expressive-code .frame::after {
content: attr(data-lang);
position: absolute;
right: 1em;
bottom: 1em;
opacity: 0.7;
}
``