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>
Related
I am trying to use footnotes in Markdown, but when I put it inside HTML (<div>) the footnotes won't parse.
Here is the minimal example of the code:
a[^1]
<div>
b[^2]
</div>
[^1]: I am a footnote
[^2]: I want to be a footnote too.
And it's parsed like this:
I was wondering what is the best way to use footnotes inside <div> blocks.
Thanks for your help in advance !
Edit: I am using Jekyll with kramdown.
The solution was to surround the footnote in a <p> block with the markdown argument.
<div>
<p markdown="1">
b[^2]
</p>
</div>
[^b]: Now I am a footnote too.
Thanks, Chris, for pointing me in the right direction.
Issue
I'm trying to display several images in GitHub's README.md with a margin of x px between them. But for some reason GitHub seems to strip away the margin-right: 30px style.
Markdown
[<img style="margin-right: 30px" src=foo.svg height=30>](https://www.example.com/)
[<img style="margin-right: 30px" src=bar.svg height=30>](https://www.example.com/)
<!-- ...and so on -->
Note: I tried align="left" here which works fine but breaks on lg sm xs devices.
You could use to make space instead of CSS margin.
It is not possible to use different types of styles in GitHub markdown.
Github only allows to use of some attributes inside the HTML tag and also removes some attributes from the tag if the user puts them inside the HTML tag.
Also, we cannot use CSS in GitHub markdown because it is part of the sanitization process.
The HTML is sanitized, aggressively removing things that could harm you and your kin—such as <script> tags, inline styles, and class or id attributes.
source: https://github.com/github/markup#github-markup
If we use an HTML block in the markdown file something like
<div style="margin-right: 30px;">
Markdown content goes here.
</div>
Then, When GitHub rendered it, the style attribute was automatically removed and no CSS style was applied. It will render it something like
<div>
Markdown content goes here.
</div>
N.B: In the case of positioning, the align attribute is the only way that will currently work. Despite being deprecated, it's still rendered.
At last, you can do it hacky way ✨
While a bit hacky, you can use <dl>, <dt> and <dd> tags in combination to make indent without any enumeration (unlike <ul>/+/-/* or <ol>/1. 2. 3.).
The lines in preview below are generated by ---, but it works without those.
See example below:
This is normal text.
---
<dl>
<dd>This gets indented, without enumeration nor dots.</dd>
</dl>
---
<dl>
<dd>
<dl>
<dd>
Multiple levels seems to be possible?
</dd>
</dl>
</dd>
</dl>
---
<dl><dd><dl><dd><dl><dd><dl><dd>
Yes, but syntax gets messy, unless you write it single line :)
</dd></dl></dd></dl></dd></dl></dd></dl>
Result preview:
Check it directly in my GitHub gist here.
You can simply add
<div align="center">
<div align="center">
<div align="center">
<p>a</p>
</div>
<p>a</p>
<p>b</p>
</div>
<p>a</p>
<p>b</p>
<p>c</p>
</div>
By adding a div you can customize the position
You refer the outcome in my GitHub
Hack Required
Due to GitHub's HTML sanitization (removing a lot of the attributes and values), you'll need to find an unorthodox way of styling your page. One way I found pretty effective was to create an invisible image, completely transparent, and include that between the images you want margin.
Example
<div align="center">
<span><img src="./loginScreen.jpg" height=650 width=300 /></span>
<span><img src="./aligner.png" height=50 width=150 /></span> <!--invisible-->
<span><img src="./Expenses.jpg" height=650 width=300 /></span>
</div>
You can easily alter the height and width of that image as if it were the top/bottom, left/right margin. Hope that helps!
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 have been created simple web page using html, css and some scripts.
Here is my jsfiddle i tried: http://jsfiddle.net/67x8cyp9/
<p>
<img class="text-wrap" align="right" src="img/9780143332497.jpg">
<div class="caption">
<form method="get" action="9780143332497.png">
<button type="submit">Download!</button>
</form>
</div>
</p>
Is it correct to use <form> tag and <div> tag inside <p> tag?
And also, how to set download button under the image?
Can anyone help me to fix this?
Thanks in advance.
Its NOT recommended.
According to W3 specifications, <p> is only allowed to contain text or 'inline' (not 'block') tags. However a <form> counts as 'block' content not as 'inline' content(see this for Minimal Content Model in <p> tag). Alternately, you may use a <div> to enclose your <form>
You may validate your html code on w3 validator for better clarity.
Cheers!
Not it is not, p is a block element, but cannot contain other block elements, only inline ones. (at least in HTML4, but I don't think HTML5 changes this behaviour).
Hmm, according to MDN, you can put a form in a p, but actually what happens is that the end of the p is at the beginning of the form, so not very useful.
Update:
To help you in your current actual problem, you can wrap the content in a div instead of a p:
<div class="right-figure">
<img class="text-wrap" src="img/9780143332497.jpg">
<div class="caption">
<form method="get" action="9780143332497.png">
<button type="submit">Download!</button>
</form>
</div>
</div>
And in the CSS file:
.right-figure {
float: right;
}
This will do, what you need.
Another approach:
By the way, you could also just use a link instead of a form:
Download!
and format the anchor with CSS to look like a button, just like e.g. Twitter Bootstrap does.
Markdown syntax is often convenient to write blogs and comments;
But at times it interferes with the content when you would want to write a simple html
Is there a tag / syntax that asks markdown to ignore that part like the pre html tag?
If pre works, what if the markdown part needs to include an html tag?
The original implementation of Markdown (by Gruber) and PHP Markdown don't format inside block-level HTML elements, so you can use <div>, for example:
Markdown text.
More markdown text.
<div>
Markdown ignores inside the div, you can do all sorts of crazy stuff:
Stack Overflow.
<blink>Is blink still supported?</blink>
</div>
Yet more markdown text.
Will get rendered as:
<p>Markdown text.</p>
<p>More markdown text.</p>
<div>
Markdown ignores inside the div, you can do all sorts of crazy stuff:
Stack Overflow.
<blink>Is blink still supported?</blink>
</div>
<p>Yet more markdown text.</p>
At least here on Stack Overflow, the ... <pre> HTML tag works just fine for that purpose. It also formats your text like a browser would:
This is pre-formatted, so in here I can /slash/ and *star* stuff
without issues, and [[square brackets]] [are] just brackets.