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!
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
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">
Related
I want to use an external CSS file for my markdown.
I added this at the top of my file:
<link href="./src/css/main.scss" rel="stylesheet"></link>
And was able to use CSS classes. But my problem is when I use a CSS class, it completely overwrites the markdown and the markdown formatting is gone.
For example I want to have a code section with font color red, I tried this:
<span markdown="1" class="font-red" >
```bash
quasar dev```
</span>
But this prints out the entire line in red. CSS overwrites the markdown formatting:
` ``bash quasar dev```
I tried to change it to:
```bash
<span markdown="1" class="font-red" >
quasar dev
</span>
```
But this prints the tag as text. This time, markdown formatting overwrites the CSS.
So how can I achieve a mixture of markdown and CSS format?
A code section where its font is color red?
Help please! Thanks
This is part of the markdown syntax. Markdown isn't parsed inside inline HTML. You need to recreate the HTML elements yourself.
Plus, you can't put block-level elements inside a inline-level element (like <span>).
Use this:
<pre markdown="1" class="font-red"><code>bash
quasar dev</code></pre>
Part 1:
I have been searching for a while now and have found a few options that work in markdown but not how I would like. I am looking for a way to add images to a markdown files HTML.
Currently this works in the md files:
But, I am trying to add a class to the above with no success.
What I have tried so far:
![img description][../img/splash/homepage-tall.jpg]{: .img-fluid }
{.img-fluid}
![img description][../img/splash/homepage-tall.jpg]{: class=img-fluid }
Can a class be added to markdown?
Part 2:
I even tried going the direct HTML route but, the relative path does not work. Is there a way to link the images using HTML in a markdown file?
<img class="module" src="../img/splash/homepage-tall.jpg" alt=" "/>
I have a page on my site where I'm displaying HTML email.
Some of that email seems to come with CSS that overrides my site layouts such that certain things get misplaced...
e.g. I have a toolbar at the top of the page that on some mails covers the various header information from the email.
Is there a way of creating a div where I can put the html email with a layout that effectively says 'Stay in this div and don't bugger about with anything else'?
Worth noting that I have the html content as 'text' rather than referring to an external website. (It's actually a return from an API, but assuming the same restrictions apply)
%iframe{srccode: #mail.html}
Just gives me a blank iframe
Include your mail using an IFrame similar to this:
<iframe src="http://www.w3schools.com"></iframe>
This will keep the styles separate
see http://www.w3schools.com/tags/tag_iframe.asp for options to customize the IFrame
If using html as text (rather than referencing an existing page:
%iframe{srcdoc: "#{#mail.html}"} #for rails / haml
or
<iframe srcdoc="<your html as text>"></iframe>
You may be able to incorporate the scoped style:
<div>
<style scoped>
h1 { color: FireBrick; }
p { color: SaddleBrown; }
</style>
<h1>This is an H1 in a scoped div. Regardless of global styles the text should be "FireBrick".</h1>
<p>This is a paragraph in a scoped div. The text should be "SaddleBrown".</p>
</div>
<p>This is another paragraph, that will unaffected by the scoped style and remain black.</p>
worth noting: this feature is still experimental and is not widely supported by 2015 browsers, currently, only FireFox v21.0+ supporting this feature. (more info # w3school.com)
Reference: https://css-tricks.com/saving-the-day-with-scoped-css/
Dave's answer above
<iframe src="http://www.w3schools.com"></iframe>
is good for referencing an external site, or a page that exists as html.
If using html as text (rather than referencing an existing page):
%iframe{srcdoc: "#{#mail.html}"} #for rails / haml
or
<iframe srcdoc="<your html as text>"></iframe>
And then formatting the iframe to suit does the trick.
I'm writing a Github README.md file, and i have diferent tables. The contents are different, so table width is different too.
I want, at least the first column to be of fixed width, so i tried adding this before all the tables in the Markdown file:
<style>td:nth-child(odd){width:200px}</style>
Surprisingly that is working in my editor preview, but when committed to github, the text appears with the style tags stripped, and no style is applied.
My questions is if it's possible on github, and id it is, how do i do it.
Just tested it myself.
<style>
#foo {color: red}
</style>
<p id="foo">foo</p>
<p style="color: blue">bar</p>
The above rendered to:
#foo {color: red}
<p>foo</p>
<p>bar</p>
GitHub strips style tags and attributes preventing you from changing the style on their pages. This is probably for security reasons. If you could inject css into GitHub pages, you could easily launch a phishing attack.
It's working only with height and width so far.
<img style="width:500px" src="xyz.png"/>
This sounds very backwards, but I want to take existing CSS classes and make them inline in the element itself (The css styles and the html elements are in the same file). There is a reason for this, for which I will not go into detail.
Example:
<html>
<style type="text/css">
.p1 { height: 10px; }
</style>
<body>
<p class="p1">...</p> <!-- Remove class="p1" and replace with style="height: 10px;" -->
<p class="p1">...</p>
<p class="p1">...</p>
</body>
</html>
Keep in mind there can be many CSS classes, and many can belong to a single element.
Edit: The reason I'm doing this is because (based on our client) we want to generate PDF documents from an HTML template. The PDF tool we use does not work well with external CSS classes.
You are looking for Premailer (The source available as well) - it is a Ruby library that does just that (inlines CSS for HTML email - but the output isn't specific to HTML email - it should work just fine with your PDF document generator as well).
There is also lamson.html.HtmlMail if you are using Python and there are a variety of Node.js libraries available to do the same thing.
MailChimp has a page for this in their labs, the CSS Inliner -
http://beaker.mailchimp.com/inline-css
It does leave the class, however.