Hugo: Code blocks not rendered correctly in lists

Created on 11 Jan 2017  路  14Comments  路  Source: gohugoio/hugo

This markdown:

- Hello<br>
  bla bla
- Example<br>
  ```javascript
  var message = 'hello';
  console.log(message);
  ```

The <br> is also needed in Hugo for a line break in the list item, which differs from other generators.

Renders as:

  • Hello
    bla bla
  • Example
    javascript var message = 'hello'; console.log(message);
Keep Upstream

Most helpful comment

Did the update from BlackFriday ever get merged into Hugo? I'm still seeing weird code-block stuff.

Screen Shot 2019-05-28 at 12 55 07 PM

Here's my Markdown for the image above:

#### Run the Installation

1. Connect to your machine via SSH or open a terminal if you are working on a local installation.
2. Change to your root `~` directory and update your system:

    ```bash
    cd ~
    sudo apt update -y && sudo apt upgrade -y
    ```

3. Download the latest [package](https://github.com/exampleproject/releases) to your computer if you haven't already. You can also use `wget` if you'd prefer:

    ```bash
    wget https://github.com/exampleproject/release.tar.bz2
    ```

4. Unzip the package and move the directory to your home `~` directory:

All 14 comments

Assuming you use Blackfriday, please post an issue here:

https://github.com/russross/blackfriday/issues

And link back to this issue.

You should post the entire description on the BF issue, not just a link back here.

This works

- Hello<br>
bla bla

- Example<br>
```javascript
var message = 'hello';
console.log(message);
\``` (remove that leading \ and this comment)

- Hello again!

Simply put an extra newline between each list item. I do not know if this is a hack, or if this is how it supposed to be done. But I have learned doing that by trial and error :)

https://scripter.co/get-current-directory-name-without-path/

Reported a similar/same issue. The hack mentioned above breaks the ordering in an ordered list, so it doesn't really work. Linked issue includes a demo markdown file and says specifically what is wrong in the generated HTML.

https://github.com/russross/blackfriday/issues/392

The hack mentioned above breaks the ordering in an ordered list, so it doesn't really work.

??

Works fine for me:
image


HTML

    <ol>
        <li>
            <p>awk</p>
            <div class="highlight">
                <pre><code class="language-sh" data-lang="sh"><span></span><span class="nb">pwd</span> <span class="p">|</span> awk -F/ <span class="s1">&#39;{print $NF}&#39;</span>
</code></pre>
            </div>
        </li>
        <li>
            <p>rev and cut</p>
            <div class="highlight">
                <pre><code class="language-sh" data-lang="sh"><span></span><span class="nb">pwd</span> <span class="p">|</span> rev <span class="p">|</span> cut -d/ -f <span class="m">1</span> <span class="p">|</span> rev
</code></pre>
            </div>
        </li>
        <li>
            <p>basename</p>
            <div class="highlight">
                <pre><code class="language-sh" data-lang="sh"><span></span>basename <span class="sb">`</span><span class="nb">pwd</span><span class="sb">`</span>
</code></pre>
            </div>
        </li>
    </ol>

I see. If you put a newline after the code block but not before it, the numbering is maintained.

If you put an empty line before the code block as well as after, the numbering is not maintained. I don't know if that is expected behavior, but it is certainly surprising to me.

This issue has been automatically marked as stale because it has not had recent activity. The resources of the Hugo team are limited, and so we are asking for your help.
If this is a bug and you can still reproduce this error on the master branch, please reply with all of the information you have about it in order to keep the issue open.
If this is a feature request, and you feel that it is still relevant and valuable, please tell us why.
This issue will automatically be closed in the near future if no further activity occurs. Thank you for all your contributions.

I believe this issue can be closed as hugo itself has little to do with it. But the Blackfriday repo issue handling and maintenance is in a sad state .. there has been no activity on the issues posted related to this current issue: https://github.com/russross/blackfriday/issues/326, https://github.com/russross/blackfriday/issues/239, and also in general (I have noticed that for quite a few months)! 馃槥

Workaround I currently use: 8 space indentation to get the code block. {{< highlight ... >}} to get syntax highlighting if I want it that badly.

Close it for hugo.

This has been fixed recently in https://github.com/russross/blackfriday/pull/476 and https://github.com/russross/blackfriday/pull/521. It would be great to update the blackfriday dependence to include these fixes.

Did the update from BlackFriday ever get merged into Hugo? I'm still seeing weird code-block stuff.

Screen Shot 2019-05-28 at 12 55 07 PM

Here's my Markdown for the image above:

#### Run the Installation

1. Connect to your machine via SSH or open a terminal if you are working on a local installation.
2. Change to your root `~` directory and update your system:

    ```bash
    cd ~
    sudo apt update -y && sudo apt upgrade -y
    ```

3. Download the latest [package](https://github.com/exampleproject/releases) to your computer if you haven't already. You can also use `wget` if you'd prefer:

    ```bash
    wget https://github.com/exampleproject/release.tar.bz2
    ```

4. Unzip the package and move the directory to your home `~` directory:

I'm also face this issue, it seems be fixed in the blackfriday, but in hugo this issue still exists.

Yup, same issue here

Was this page helpful?
0 / 5 - 0 ratings

Related issues

vielmetti picture vielmetti  路  3Comments

MunifTanjim picture MunifTanjim  路  3Comments

marekr picture marekr  路  3Comments

VoidingWarranties picture VoidingWarranties  路  3Comments

kaushalmodi picture kaushalmodi  路  3Comments