Hugo

Put a blockquote into a numbered list

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 @pkollitsch 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?