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>
Related
The problem
My post containing some code blocks renders them like "box in a box".
This is the post: https://telatin.github.io/N50-with-conda/ and here what I see from Firefox: http://prntscr.com/oujb6u
The code
This is the source code: https://raw.githubusercontent.com/telatin/telatin.github.io/master/_posts/2019-08-19-N50-with-conda.md
I'm new in using Jekyll, and I tried both triple backticks (as I usually do in GitHub, and the four-spaces at the begin of the line (current implementation). Both renders the same.
Question
I don't understand if the problem is in the code I write or in the template I'm using. What should I do to have a nicer output (single framed)?
If you inspect the generated HTML, you'll see that there are nested blocks with the same class .highlight:
<div class="highlighter-rouge">
<div class="highlight">
<pre class="highlight">
<code>CHECK=$(n50 contigs.fasta)</code>
</pre>
</div>
</div>
What you can do is alter your CSS to be more specific:
i.e. instead of .highlight, use div.highlight for base code-block styles and use
div.highlight > pre.highlight to style the pre block elements if required.
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">
I'm trying to implement Redcarpet Markdown in my Rails project.
I have a class 'camp-description' which styles the paragraph. My problem is that when I add the markdown() inside my ERB tag then the styles of camp-description is not applied anymore.
This is my code:
<div class="panel">
<h5>TRAINING CAMP PROGRAM</h5>
<p class="camp-description"><%= markdown(#camp.agenda) %></p>
</div>
The output html looks like this:
How do I make sure that the markdown stays inside the 'camp-description' class and hence keep applying its styles?
It looks like Jekyll plugins provide a way to alter the transformation from Markdown to HTML, but I'm not sure where to get started.
Say I wanted to apply a CSS class to all of the paragraphs in a post. How do I do that? E.g. I've got a post:
---
title: "my cool post"
...
---
Hey I want this paragraph wrapped in a class called my-custom-class
And the HTML outputs:
...
<p class="my-custom-class">Hey I want this paragraph wrapped in a class called my-custom-class</p>
...
If I'm mistaken about plugins, I'm cool with another solution (other than manually adding the class to each paragraph in the Markdown).
Using Kramdown IALs
To apply styles to just one paragraph you can use kramdown's IAL, after writing the paragraph apply the class you want with {: class="my-custom-class"}
---
title: "my cool post"
...
---
Hey I want this paragraph wrapped in a class called my-custom-class
{: class="my-custom-class"}
Using SCSS
If you want to apply the custom style to all your posts paragraphs,
wrap your posts content with a specific class like <div class="post">...</div>
edit your SASS with a custom style that affects only to .post p like:
.post {
p {
#my-custom-style properties..
}
}
As a side note, remember also that you can always add plain html in markdown like:
<div class="my-custom-style">
Some cool paragraph
</div>
Apparently you need to use
{::options parse_block_html="true" /}
<div class="my_class">
...
</div>
{::options parse_block_html="false" /}
to parse the markdown between the html.
How to add class to group of markdown code including header and code and text
Like below:
# header
some text
paragraph with
```Matlab
clc;
clear all;
t=1:10;
a=sin(t);
plot(a)
```
___bold and italic text___
` some other code`
I want to all container class to all the above starting form header
`{: class="container"}`
works only for the last line of code
and if I group it in any html container like div or p or span them markdown don't work even if I add markdown=1
Like this:
<div markdown="1">
# header
some text
paragraph with
```Matlab
clc;
clear all;
t=1:10;
a=sin(t);
plot(a)
___bold and italic text___
`some other code`
<div>
then markdown doesn't work.
MediaWiki creates <pre> tags after parse {{Template}} with html code.
How to prevent this tags?
Example template:
<span style="color:#FF0000">{{{1}}}</span>
In wiki html page looks like:
<pre>
<span style="color:#FF0000">Some Text</span>
</pre>
In basic templates like:
My name is {{{1}}}
no problem with <pre> tags.
PS <pre> tag creates unwanted borders around elements in MediaWiki.
Bergi's solution: avoid to indent some markup (either in the template or outside at the inclusion) with one (or more) spaces.