Astro - Getting Started Guide for Beginners

October 26, 2025

Images

  • The images doesn’t work as expected in your markdown files. You will have to use ![]() notation.

Refer Astro’s Official Guide 🔗

  • Note, the images added using ![]() are not resizable. That’s only possible in <Image> tags which you can’t use in Markdown files directly. Second alternative is to use <Image> tag in MDX files. For this you need to convert your .md files to .mdx files. Not only that, you need additional configuration too. All details are in the Astro Official Guide.

To let external links in the markdown files to open in another tab, I used the following hack suggestedb by Astro. Install rehype-external-links plugin.

Astro Official Guide 🔗

I also added the below config in astro.config.mjs

export default defineConfig({
  markdown: {
    rehypePlugins: [
      [
        rehypeExternalLinks,
        {
          target: "_blank",
          rel: ["noopener", "noreferrer"],
          content: { type: "text", value: " 🔗" },
        },
      ],
    ],
  },
});

I added content: { type: "text", value: " 🔗" } to show the emoji next to the link.