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!

Solution 1

This might be able to answer your question, it looks like you can embed HTML in markdown and you can add styles that way. Markdown and image alignment

You said you tried inline, did you try just HTML?

<img src="https://i.imgur.com/sZlktY7.png" width="50">

Solution 2

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