Starlight's <Asides/>s for Astro md/mdx

Add asides with remark directives npm package

1. note
2. tip
3. caution
4. danger
5. success

:::note[Title]
text
:::

Dark and light theme

uses :root[data-theme="dark"] by default, but this can be changed on line 21 of styles.css

Requirements

Must add remark-directive plugin to your remark plugins before astro-starlight-remark-asides.

Copy files and use

1. the .js file here is a remark plugin, import it and add it to your remark plugins

import { defineConfig } from "astro/config";
import remarkDirective from "remark-directive";
import astroStarlightRemarkAsides from "./src/path/to/index.js";

// https://astro.build/config
export default defineConfig({
  markdown: {
    remarkPlugins: [remarkDirective, astroStarlightRemarkAsides],
  },
});

2. Import the .css file into whatever path is rendering the md/mdx

// src/[slug].astro
---
import "src/path/to/styles.css";
---
<!--  -->

Use as npm package

1. import the remark plugin and add to remark plugins

import { defineConfig } from "astro/config";
import remarkDirective from "remark-directive";
import astroStarlightRemarkAsides from "astro-starlight-remark-asides";

// https://astro.build/config
export default defineConfig({
  markdown: {
    remarkPlugins: [remarkDirective, astroStarlightRemarkAsides],
  },
});

2. Import the .css file into whatever path is rendering the md/mdx

// src/[slug].astro
---
import "astro-starlight-remark-asides/styles.css";
---
<!--  -->