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!

Weatherwise

share relevant code please – Eade

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

Plante

Actually I did, see my updated question. Don't know why textarea is behaving this way! it's not even accepting the image tag – Weatherwise

Hmm, can you provide your markdown? Also, do you have a link to your website? – Plante

Okay, I just decided to go with my intuition, and it was a package(express-sanitizer). I installed it so that no one can write a script tag and only HTML will be rendered. I commented it out and it started working just fine! Thanks anyway, Squeakasaur ! – Weatherwise

Actually, I had one more question (doesn't really deserve to be asked seperately), I have a form where the author writes a post in parts, one input box for title,one for image, one for textarea! Sice, input has a type of text, is there any way I can use italic/bold tags for title , just as in textarea ? – Weatherwise

HTML/CSS , but typing text in input will result in the exact input. Ex : <em>Your Name</em> will result in <em>Your Name</em> – Weatherwise

Yes you can style these but are you asking like when they submit the form to have it keep the styling? You can style inputs like this: input[type=text]{ font-size: 10px; font-weight: bold; font-style: italic; } – Plante

But the problem arises, when I only want to style a part of the text (ex : name of a movie) . – Weatherwise

Let us continue this discussion in chat. – Plante

Answer 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

Bicolor

Answer 3

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

Apotheosize

While aspect ratio would probably help with the image stretching, op's question isn't asking for help with the stretching. – Eccentric

@SamSabin You're right! you can stretch and squeeze image. there a good live demo in the mdn website. – Apotheosize