Adding code titles (filenames) to astro-micro-academic

I wanted to add code titles to astro-micro-academic. I’m brand new at this so here’s instructions that a newbie can use. I’m using How to add filename to a code block in Astro blog as my guide.

First, install the remark-code-titles plugin:

$ cd ~/myblogdirectory
$ npm install remark-code-titles

Next, edit astro.config.mjs. I added this line:

import remarkCodeTitles from "remark-code-titles";

and also added

    remarkPlugins: [remarkCodeTitles],

to the markdown: section. Ultimately, my astro.config.mjs ended up looking like this:

import tailwind from "@astrojs/tailwind";
import { defineConfig } from "astro/config";
import { rehypeHeadingIds } from "@astrojs/markdown-remark";
import remarkToc from "remark-toc";
import { rehypeAccessibleEmojis } from "rehype-accessible-emojis";
import rehypeKatex from "rehype-katex";
import remarkMath from "remark-math";
import remarkEmoji from 'remark-emoji';
import remarkCodeTitles from "remark-code-titles";
import mdx from "@astrojs/mdx";
import sitemap from "@astrojs/sitemap";
import pagefind from "astro-pagefind";

// https://astro.build/config
export default defineConfig({
  site: "https://astro-micro-academic.vercel.app",
  integrations: [tailwind(), sitemap(), mdx(), pagefind()],
  markdown: {
    shikiConfig: {
      theme: "css-variables",
    },
    rehypePlugins: [rehypeHeadingIds, rehypeAccessibleEmojis, rehypeKatex],
    remarkPlugins: [remarkToc, remarkMath, remarkEmoji],
    remarkPlugins: [remarkCodeTitles],
  },
  server: { port: 1234, host: true}
});

Next, I needed to do something in CSS to make the headers look good. Here’s what I came up with to add to the end of global.css:

.remark-code-title {
    @apply border-dashed border-2 border-indigo-600;
    @apply bg-neutral-300 dark:bg-slate-800;
}

.astro-code {
    @apply mt-0;
}

Here’s how to use them:

```bash:/usr/local/bin/file
My file contents
```

or if you don’t have a file type:

```:/tmp/file
My file contents
```

Incidentally, the file types appear to be listed at github.com/jincheng9/markdown_supported_languages. (Hey, Smalltalk is a supported language! Cool!)

Some day I’ll need to look into what that site: "https://astro-micro-academic.vercel.app", implies. I think I’ll have to change it to my site when I go live.