EasyABC Markdown Specifics

This is a guide for specific markdown syntax used in EasyABC. It is in addition to the general markdown guide.

TL;DR

To resize and center images use the premade classes like:

![Alt text](./example.png)(class:'small')
![Alt text](./example.png)(class:'medium')
![Alt text](./example.png)(class:'large')

Add captions to images by adding the caption class to a tag like:

![Alt text](./example.png)(class:'medium')
<p class="caption">The Caption</p3>

Why this exists

Markdown (and the Astro rendering engine) natively supports adding images with the syntax:

![Alt text](./example.png)

However, it does not provide away to style the image at all. This means the image will be at their original resolution, so you may end up with images that are larger or smaller than desired. Additionally, they will be be not be centered. The example renders too small and not centered on desktop.

A quick fix

Astro supports Remark plugins, and with the remark-imgattr plugin we can inline styles for image!

![Alt text](./example.png)(
  style: '
    width: 36vw;
    display: flex;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 2em;
    margin-top: 1em;
  ')

This example sets an image to 40vw and centers it. But this is a bit verbose and too much to coding when we’re doing creative writing!

A better fix: pre-made classes

I’ve defined some premade classes for images that center and size them (dynamically).

![Alt text](./example.png)(class:'small')
![Alt text](./example.png)(class:'medium')
![Alt text](./example.png)(class:'large')

Captions

I’ve defined a caption class you can use for your <p> tags.

![Alt text](./example.png)(class:'small')
<p class="caption">The Caption</p>

The Caption

Define your own classes

If you’d like to edit the pre-made classes or add your own open src/styles/blog.css, and add your changes!

---

• This is based on the work of Oliver Speir’s remark-imgattr.
  • This Github issue provides explicit details.