CODEWITHSUNDEEP
htmlcssmarkdown
eknoor4197
eknoor4197

Reputation: 199

Inline CSS in Markdown

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 :

enter image description here

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 :

enter image description here

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!

Upvotes: 8

Views: 25677

Answers (3)

Mohammed Ali
Mohammed Ali

Reputation: 1

may be aspect-ratio will help

definition:

The aspect-ratio CSS property allows you to define the desired width-to-height ratio of an element's box. This means that even if the parent container or viewport size changes, the browser will adjust the element's dimensions to maintain the specified width-to-height ratio. The specified aspect ratio is used in the calculation of auto sizes and some other layout functions.

if you need live demo visit mdn hope that will work

Upvotes: 0

zzeroo
zzeroo

Reputation: 5636

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

Upvotes: 11

Squeakasaur
Squeakasaur

Reputation: 245

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.sstatic.net/geBaa.png" width="50">

Upvotes: 5

Related Questions