How did you achieve it?
I want to put a blockquote into a numbered list.
The following does not put the blockquote into a list item, so a new list is started:
<blockquote >
<div>
{{ .Inner | markdownify }}
</div>
</blockquote>
Hi @mangogul, I moved your post to a new topic, since the question you’re asking is different enough from the original topic.
1. list item
> blockquote
more content of the list item
> another blockquote
2. another list item
should do the trick in markdown.
The div inside of blockquote breaks it because those both are top level elements
Hi @davidsneighbour pkollitsch,
thanks for the reply! Unfortunately, removing the div tag doesn’t help.
I’d like to have access to the Hugo built-in shortcodes, to perhaps use them as templates for custom shortcodes. Do you know where to find them?
If I use the built-in highlight or ìmage` shortcode, for example, the shortcode content is put into the list item as expected (like a paragraph) if I use a tab to indent it (in the picture, see the arrows).
The built-in note doesn’t support this, my custom note neither.
In the picture, see the wrong numbering highlighted yellow:
Any idea?
Do it with CSS
<div class="bq">
{{ .Inner | markdownify }}
</div>
and in CSS
.bq {
padding-left: 20px;
}Are you writing the numbering as 1 all the time or did you try 2 there? I think the problem is, that Markdown treats both as block level elements.
Is the HTML as you would expect it or does the blockquote go “outside” of the list (</ul> before and <ul> after)?
If your repo is public please link to it and post the links to the sample md-file and your own blockquote shortcode.
meaning: the second list should start at 2 instead of 1. and writing 2. text should do that.
I am not sure why you need that shortcode.
This markdown works fine:
1. List item 1
Text before quote block.
> Quote block in list item 1
Text after quote block.
2. List item 2
Text before quote block.
> Quote block in list item 2
Text after quote block.
3. List item 3
Text before quote block.
> Quote block in list item 3
Text after quote block.
That generates this HTML:
<ol>
<li><p>List item 1</p>
<p>Text before quote block.</p>
<blockquote>
<p>Quote block in list item 1</p>
</blockquote>
<p>Text after quote block.</p></li>
<li><p>List item 2</p>
<p>Text before quote block.</p>
<blockquote>
<p>Quote block in list item 2</p>
</blockquote>
<p>Text after quote block.</p></li>
<li><p>List item 3</p>
<p>Text before quote block.</p>
<blockquote>
<p>Quote block in list item 3</p>
</blockquote>
<p>Text after quote block.</p></li>
</ol>
… and shows up like this:
Source:
3 Likes
Thanks for your collective feedback!
- Indeed, markdown blockquotes work as expected.
- The bq class doesn’t work with me.
- The second list does start at 2.
In theory, I can solve my layout problem with a table such as in the following shortcode:
<table class="collapse ba br2 b--black-10 pv2 ph3" >
<tr class="bg-color--dark-gray pa0">
<td class="bg-light-gray pv2 ph3 pa0"><h4 class="blue">{{if .Get 0}}{{.Get 0 | markdownify}}{{else}}Note{{end}}</h4></td>
</tr>
<tr class="pa0">
<td class="bg-light-gray pv2 ph3 pa0"><p>{{ .Inner | markdownify }}</p></td>
</tr>
</table>
But if I markdownify the note content, it is rendered as highlighted code. See picture.
Any ideas how I can get rid of the highlighting?
