Inline CSS in Markdown

Question

I'm using Simplemde ( markdown editor ) as an embdedded textarea for writing articles in my website. I've recently encountered a problem :

While writing, if I insert an image , it stretches to 100%, taking over the entire page, like this :

I tried inserting inline css (style tags) in the textarea, but that didn't work.

However in the preview option, I used inline css (set height and width at 400px ) and it worked :

How can I set the image size as per my preference in this markdown editor ?

UPDATE : I already tried embedding HTML in Markdown ,like :

<img style="width:400px;" src="abc.jpg">

But this doesn't seem to work, and my the image doesn't even appear in the article this way. The entire img tag gets shrinked to <img> in my textarea!

Answer 1

Embedding CSS in Markdown is easy. It may depend on the markdown parser but usually one can include any valid HTML and CSS in markdown files.

<style type="text/css" rel="stylesheet">
* { color: red; }
</style>
This is a markdown file. Save this snipped under `test.md` and convert into html5
with `pandoc` or any other markdown parser.

A very powerful markdown parser is pandoc!

pandoc --from=markdown --to=html5 --output=test.html test.md