Codeblock problems when show linenos

[JoJoJotarou]

Related issues:

• issue#695
• issue#919
• issue#697
• #discussioncomment-2777192

The problem occurs when you use highlight lines !!!
The text you see in the image is what I used in Markdown!!!

I've had some tests recently.In sample config.yml:

markup:
    highlight:
        # anchorLineNos: true
        codeFences: true
        guessSyntax: true
        lineNos: true

this

```html
```

is same as this.

```html {linenos=table}
```

html like:

<div class="highlight">
    ...
    <table>
        <tbody>
            <tr><td><pre><code>......</code></pre></td></tr>
            <tr><td><pre><code>......</code></pre></td></tr>
        <tbody>
    </table>
    ...
</div>

Means the codeblock is rendered as <table> by default.

By https://gohugo.io/functions/highlight/#options

Instead of specifying both lineNos and lineNumbersInTable, you can use the following shorthand notation:

lineNos=inline
equivalent to lineNos=true and lineNumbersInTable=false
lineNos=table
equivalent to lineNos=true and lineNumbersInTable=true

So add lineNumbersInTable=false in config.yml to tell Hugo not use <table> rendering codeblock.

markup:
    highlight:
        lineNumbersInTable: false

now, this

```html
```

is same as this.

```html {linenos=inline}
```

html like:

<div class="highlight">
    <pre><code>......</code></pre>
    <pre><code>......</code></pre>
</div>

Then add this:

/* assets/css/extended/custom.css */
.post-content .highlight pre {
    margin: 0;
    background: var(--theme) !important;
}

Final effect：

Derivative problems:

I haven't found a real solution, but it can be done:

/* assets/css/extended/custom.css */
.post-content pre code {
    word-break: break-word;
}

.post-content .highlight pre code span{
    white-space: break-spaces;
}

hugo: v0.95
PaperMod(commit Id): cb9be55c78efadee651f3a9f5e9b719f28a6d290