I have Astro.js up and running and want to add php-markdown style definition lists to my Markdown content. There is a Remark plugin which should do the job — if I could only set it up correctly. The plugin installed without complaint. I added the plugin to my astro.config.mjs file copied in below:
import { defineConfig } from 'astro/config';
import { remarkDefinitionList, defListHastHandlers } from 'remark-definition-list';
// https://astro.build/config
export default defineConfig({
markdown: {
extendDefaultPlugins: true,
// Applied to .md and .mdx files
remarkPlugins: [remarkDefinitionList],
},
});
Definition lists are now turned into:
<div>
<div>Apple</div>
<div><p>Pomaceous fruit of plants of the genus Malus in
the family Rosaceae.</p></div>
<div>Orange</div>
<div><p>The fruit of an evergreen tree of the genus Citrus.</p></div>
</div>
Less than ideal. I think the issue is connected with adding a handler (defListHastHandlers) to remarkRehype and I am not sure how to do this in the context of Astro.js
Bonus points for pointing toward information on all things Remark integration into Astro. Like how do I tell what plugins are already installed?