Markdown has no native way to pass styles to elements. This presents a workaround specifically for styling images. Mostly used to add a class for floating the image left or right on the page.
This is a new website and is under active development. There will be some odd-looking layouts and colours while this is happening. Please bear with me and check back again to see any updates.
NoteThanks are given to Goetz Buerkle for documenting this workaround.How to control image positioning and alignment with Markdown in Astro
This is an easy, if hacky workaround.
Simply wrap the image link in <span></span>
HTML tags. You can add classes and manual styles to the span.
I’ve used CSS styles like this:
span.imgright { display:block; float: right; border:1px solid silver; margin:.3rem; padding:0;}
To float an image to the right of the page, allowing the text to wrap around it.
<span class="imgright"></span>
Obviously, this could be used with other block types as well.
TipThe <span> tag appears to be allowed in Astro’s Markdown, you cannot use <div>.