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?
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>
How do you center an item with Markdown? I'm looking for a solution that works in Grav.
Markdown does not support this feature natively, but you can achieve this wrapping Markdown into HTML.
As a rule of thumb, most 'flavors' of Markdown will render this as centered text:
<p style="text-align: center;">Centered text</p>
Specifically for Grav, as their documentation states, you should do these following steps:
in your system configuration file user/config/system.yaml make sure to activate the markdown extra option:
pages:
markdown:
extra: true
in your wrapper tag make sure to add the parameter markdown="1" to activate processing of markdown content:
<div class="myWrapper" markdown="1">
# my markdown content
this content is wrapped into a div with class "myWrapper"
</div>
For me it worked with the following hack: adding the tag div on top without closing the div tag. This makes the entire markdown centralized
<div align="center">
When using any element such as a title, you can use an equivalent html tag, for instance
# Title
## title 2
is equivalent to
<h1> Title </h1>
<h2> Title 2 </h2>
With title, for instance, you can align the text using the following attribute:
<!-- title only -->
<h1 align="center"> Title </h1>
<!-- title with div -->
<div align="center"> <h1 align="center"> Title inside div! </h1> </div>
But sometimes you don't want to use HTML, because it butches the capability of using markdown inside it, in these cases, you can use span, which allows you to render markdown inside HTML tags:
<!-- title with span (you can render emojis or markdown inside it) -->
<span align="center"> <h1> :star: My Career: </h1> </span>
Please note that this attribute is deprecated, while it's deprecated, it is also the only one that works with some flavors of markdown, such as Github's markdown
I'm trying to create a Jekyll project on Github, styled with Material Design Components. MDC states that Elements are not natively styled, which means that most (if not all) elements will need to be styled with classes. What this means now is that
<div class="mdc-typography">
<div class="mdc-layout-grid max-width">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-8">
```js
// some js
```
</div>
</div>
</div>
</div>
doesn't actually render the code as expected. Rather it renders as plain text. I guess I'm a little new to this. But what is the proper way to nest fenced code blocks within div tags with classes?
The rule for markdown is that it must be indented at least 4 spaces. I am aware of this.
If you are writing this on your jekyll project use
{% highlight javascript %}
{% endhighlight %}
Jekyll Docs
Here is another stack question similar to yours: link
Alternatively, you can style it like it's code.
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.
In my admin panel i got tinymce textarea. I want to preview all my changes.
i get html from tinymce
$scope.text_in = tinymce.get('myTextAreaName').getContent();
and it looks like:
<h1 style="text-align: center;">AAA</h1>
<h3 style="text-align: center;">BBB</h3>
I'm using ngSanitize and my element where i want to inject HTML
<div class="new" ng-bind-html="text_in"></div>
Thats looks ok, BUT. I got html markup without inline styles. All other styles from css works fine.
When i inspecting element there are
<h1>AAA</h1>
<h3>BBB</h3>
What am i doing wrong?
According to Angular documentation you can by pass the sanitize.
http://docs.angularjs.org/api/ngSanitize.$sanitize