What you should care about markdown for AMP

ampmarkdown
tomoyukikashiro
tomoyukikashiro

If you are an Engineer you might have your tech blog to output what you learn.
You might use markdown to write articles.

If you are interested in Accelerated Mobile Pages(AMP) the basic flow to generate html and AMP html through markdown below.

- write markdown
- generate html
- convert html into AMP html

But if you write markdown correctly It’s impossible (or hard) to convert html into AMP.
Beause AMP html needs more information which you can not add in markdwon to some of tags.

Image

Most common case is <img> tag.

component spec

- use `<amp-img>` instead of `<img>`
- `<amp-img>` should have `width`, `height` and `layout` attributes

Markdown has syntax to add <img> like this.

![alt](https://example.com/static/image/logo.png)

But there is not way to add extra attributes like width, heightin markdown.
Some of services support additional syntax for sizes but It’s not all.

![alt](https://example.com/static/image/logo.png =200x200)

You can see common markdown syntax here.
http://spec.commonmark.org/0.27/#images

Solution

The solution is simple.

You should use actual img tag in markdown

- Most of services(github etc) support img tag in markdown
- You can add more attributes like `width`, `height` and `layout`

So it’s easy to convert it into <amp-img>👍