Icons for admonishments get parsed into first HTML element

https://github.com/iterative/dvc.org/pull/3371 introduced admonishments. While very nice, I ran into a few oddities while using them. Right now I am incorporating them through raw HTML rather than MD.

<admon type="warn">
In this example we are using a <code>t2.micro</code> AWS EC2 instance. At the time of writing this is included in the AWS free tier. Make sure that you qualify for this free usage to prevent unexpected spending. When you specify a bulkier <code>cloud-type</code>, your expenses will rise.
</admon>

Because backticks don’t get parsed within the HTML element (or e.g. [link](ref)) I simply used <code></code> this has the side effect of prepending a warning emoji to the first code element:

I circumvented this by explicitly using a <p> element, but I’m not sure what the intended behavior here is.

<admon type="warn">
<p>
In this example we are using a <code>t2.micro</code> AWS EC2 instance. At the time of writing this is included in the AWS free tier. Make sure that you qualify for this free usage to prevent unexpected spending. When you specify a bulkier <code>cloud-type</code>, your expenses will rise.
</p>
</admon>

[julieg18]

It’s an unfortunate downside of using gatsby-transformer-remark in our engine, as it’s not quite built for custom components like something like MDX is, the parser is very finicky about how components are written.

Correct! Empty lines are a must when using our custom HTML components. Since I don’t think there is anything we can do about it on our end, going to go ahead and close this issue!

[rogermparent]

is this how we want it to work?

It’s an unfortunate downside of using gatsby-transformer-remark in our engine, as it’s not quite built for custom components like something like MDX is, the parser is very finicky about how components are written.