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.
Related
I'm learning Jekyll, and I have this basic file, which is prefaced by YAML frontmatter:
---
layout: 'post'
---
> Test Quote
I've successfully managed to link my CSS stylesheet to the top wrapper page.html file. But there's a problem in that when Jekyll turns this Markdown into HTML, it turns this quote into:
<blockquote>
<p>Test Quote</p>
</blockquote>
Yet I need it to generate into:
<blockquote>
<div class="quote-line-container">
<div class="quote-line"></div>
<div class="quote-mark">“</div>
<div class="quote-line"></div>
</div>
<div class="quote-container">
<p class="quote">Test Quote</p>
</div>
</blockquote>
I've tried searching every variation of the words "Jekyll change Markdown HTML output" I can and no relevant results appear for my case.
How could I do this, and change the Jekyll output? Or is there a better way to generate something like this, using CSS or something?
This is not possible to do. Jekyll uses Kramdown as its Markdown engine and the customization of the process is pretty limited (as one would expect). You can see all the options here.
For this reason, your alternatives are:
Making your own Markdown engine for Jekyll (which is clearly overkill).
Making some preprocessing script to call before Jekyll only to perform that substitution. If you have a lot to translate, it is your best alternative.
Writing your blockquotes directly as you want them generated. Jekyll will leave your HTML code intact during the Markdown translation, so the result will be the one you want.
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>
Im trying to change the html code of a website. As you can see here: https://share-your-photo.com/b12b204e8c
The Code starts with an h3 tag. i want to replace it with a p tag. at beginning with <p class=and at the end of the code with </p>. But the code turns red at the end. can you give me a solution how i can do?
So I see that you had the <h3></h3> wrapped around everything and that is not the proper syntax in html. Its called hierarchy. Hierarchy is
An element that is directly above another element in the hierarchy is
called the parent of the element below it. The element below the
parent is called the child. When two elements are equal in the
hierarchy, they are known as siblings.
--Thx Google... A <h3></h3> tag can't wrap all of those elements only tags like a <div> can or a <span>. A <div> tag is a block element. So if you have 2 <div> tags like this... <div>HI</div> and <div>Hello</div> "HI" will be on top and "Hello" will be on the bottom but if it were <span> It will make it horizontal <span>Hi</span> and <span>Hello</span> the output will be "Hi Hello". If you check out this link they briefly explain nesting. But there are many many places you can go to understand this [https://www.w3schools.com/html/html_elements.asp1 Hopefully that helps you! Keep on coding! 👍
You said: "_the code turns red at the end...". The end of what??? Are you trying to edit the code locally in an editor such as sublime, vscode?
Basically, think of an Html document as a Word document that contains titles, subtitles, etc..
In Html documents, we have the following hierarchy structure.
<h1>My Page Title</h1>
<h2>My Page Subtitle</h2>
<p>here we can have only text, <strong>bold text</strong>, <i>italic</i>, and other styled text with <span>spanned texts</span></p>
<div>
<h3>Layouts</h3>
<p>you can use divs to structure your layout, so, doesn't make sense to have divs inside paragraphs.</p>
<p>If you want, you can break lines with <br> tags</p>
</div>
For my Jekyll blog, I want the images to span the whole width of the column, while having padding on either side of the text, like this: http://www.webdesignerdepot.com/2015/05/the-ultimate-guide-to-web-animation
The main problem I'm having is that Jekyll wraps images in <p> tags, so there's no way (that I know of) to target the width of images without and not the paragraphs.
<p>
"Some text."
</p>
<p> <img src="#"> </p>
How would you suggest tackling this issue?
I think Davids answer is really good. However, if you have no problem solving this with jQuery, you can do this:
$('.content > p > img').parent().css('padding','0');
That way your markdown will stay clean.
I understand that you are writing your post/page in markdown.
In order to apply a specific style to the P container you can use kramdown block attributes to set a class on it.
Some test
{: .imgContainer}
Will render as
<p>Some test</p>
<p class="imgContainer"><img src="/path/to/img.jpg" alt="Alt text" /></p>
You can then style .imgContainer.
You can also choose to create an HTML block. This is done by wrapping an img tag in a div like this:
line
<div><img src="image.jpg" /></div>
line
No clean markdown, but a pretty clean solution nevertheless. Found the solution here.
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.