showdown: Multiline code blocks and code tags (line numbering)

Update: Solution here

Is it possible to have showdown add <code> tags for every line in a multiline code block?

How it works now (not sure how to format example properly, sry):

```
This is a test
This is a test too
This is a test three
```

Results in:

<pre><code>This is a test
This is a test too
This is a test three</code></pre>

What I am hoping to get is:

<pre><code>This is a test</code>
<code>This is a test too</code>
<code>This is a test three</code></pre>

Reason: I have some CSS code that allows for line numbering in code blocks This works using a counter for <code> tags, and a reset at each <pre> tag Since all lines are placed in a single <code> tag, it results in counting only a single line

My working CSS (resulting in only recognizing a single line):

pre {
    counter-reset: line-numbering;
    font-family: Menlo, Monaco, monospace;
    background-color: #333;
    padding: 5px;
    padding-left: 15px;
    color: #CCC;
    border-radius: 3px;
    word-break: keep-all;
    white-space: pre-wrap;
}
code:before {
    content: counter(line-numbering);
    counter-increment: line-numbering;
    padding-right: 1em;
    width: 1.5em;
    text-align: right;
    opacity: 0.5;
}

I have tried to find a solution using google and the issue tracker, but wasn’t able to find it. Apologies if I have overlooked something obvious 😉

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Reactions: 1
  • Comments: 16 (6 by maintainers)

Most upvoted comments

Updated opening post, closing ticket

Thanks again for all the time you spent on my sillyness 😉

I just finished a 24 hour shift in the ER

I think the technical term is ‘absolute legend’!

Not only a real-life hero but fixing my problems on the side… expect a donation coming up soon 😉

Out of the box, showdown does not support that functionality. However, it’s very easy to create an extension that does that for you.

You can use a listener extension, listening to the makehtml.codeBlocks.after event and change each line in the output prepending <code> and appending </code>