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
Related
I'm writing Markdown content in Nuxt 3 & Nuxt Content 2.1 and I am facing a problem as I cannot write h2-h6 headers without it rendering them as links.
h1 works fine with one octothorpe symbol but as soon as I add 1 or more of them to render smaller headers, the application automatically transforms them to URLs.
Content is rendered with the default [...slug].vue and <ContentDoc /> configuration as seen in the documentation.
What's written in Markdown:
# header 1
## header 2
... and what's actually being rendered in HTML:
<h1 id="header-1">
<!--[-->
header 1
<!--]-->
</h1>
<h2 id="header-2">
<a href="#header-2">
<!--[-->
header 2
<!--]-->
</a>
</h2>
Is there any way to solve this?
EDIT:
Nuxt is also transforming simple HTML <h2> tags to links, but now with an undefined href:
<h2>header 2</h2>
to
<h2>
<a href="#undefined">
header 2
</a>
</h2>
Checkout the Nuxt Content doc here:
In Nuxt Content, Prose represents the HTML tags output from the Markdown syntax, for example title levels, links... A Vue component corresponds to each tag, allowing you to override them if needed.
By default, h2 becomes <a> tag in <h2> tag, it is defined in this file. These files are listed in components/prose section.
You may overwrite it by:
create components/content directory
create ProseH2.vue in it
copy the code from the origin file, in the template section, remove the <a> tag and the v-else, or whatever modification you want to do with it:
<template>
<h2 :id="id">
<slot />
</h2>
</template>
Restart server, it should changes.
You can also change this behaviour in your nuxt.config file
content: {
markdown: {
anchorLinks: false,
}
},
https://content.nuxtjs.org/api/configuration/#anchorlinks
I am trying to center a code in markdown (used in JupyterLab). Here is the code I use
<div style="text-align:center"><span style="font-size:1em;">
`code template`
</span> </div>
But this code keeps showing ` at the beginning and end of this simple snippet. Any suggestion on solving this problem is appreciated
Markdown generally is not processed in HTML block-level elements like <div>s:
Note that Markdown formatting syntax is not processed within block-level HTML tags. E.g., you can’t use Markdown-style *emphasis* inside an HTML block.
But you can still use HTML:
<div style="text-align:center"><span style="font-size:1em;">
<code>code template</code>
</span> </div>
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.
I have the following HTML Code, If I have a lot of text inside my div called content, the footer div doesn't move downward and the texts go over my footer div.
To see the problem, please check this link http://jsfiddle.net/LhzrQ/
Could You please tell me how to solve the problem?
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1>
</div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</div>
<div id="content" style="background-color:#EEEEEE;width:400px;float:left;">
HyperText Markup Language (HTML) is the main markup language for displaying web pages and other information that can be displayed in a web browser.
HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <html>), within the web page content. HTML tags most commonly come in pairs like <h1> and </h1>, although some tags, known as empty elements, are unpaired, for example <img>. The first tag in a pair is the start tag, the second tag is the end tag (they are also called opening tags and closing tags). In between these tags web designers can add text, tags, comments and other types of text-based content. The purpose of a web browser is to read HTML documents and compose them into visible or audible web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page.
</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © W3Schools.com
</div>
</div>
</body>
You can delete the height element of the content div.
See: http://jsfiddle.net/LhzrQ/1/
Working fiddle
remove the fixed height to the content div. it will work .