5

I have the following fenced code block:

```<br>a = 1<br>b = 2<br>```

I would like to replace the <br>s with some other character ?, so that it acts like a newline, so that the resulting string

```?a = 1?b = 2?```

displays as though I had typed

```
a = 1
b = 1
```

That is, so that it displays like this:

a = 1
b = 1

The reason for wanting to do this is:

I'm using TablesGenerator.com to create Markdown tables. Whenever I input a fenced code block into a cell, TablesGenerator.com takes my newlines and turns them into spaces (or into <br> if I've checked the Line breaks as <br> option). So a Markdown table that I've formatted to have the content:

```
a = 1
b = 2
```

In the 2nd row, 2nd column, TablesGenerator.com converts into:

| Inline Code   | Code Block                    |
|-------------  |------------------------------ |
| `a = 1`       | ```<br>a = 1<br>b = 2<br>```  |

That is, TablesGenerator.com turns my newlines into <br>s, which leads to the Markdown table displaying undesirably as:

Inline Code Code Block
a = 1 <br>a = 1<br>b = 2<br>

The only workarounds I've found are not great. They are:

  • Instead of a code block with new lines, add a row for each line:
Inline Code Code Block
a = 1 a = 1
b = 2
  • Instead of using a Markdown table, use a text table:
+-------------+------------+
| Inline Code | Code Block |
+-------------+------------+
| a = 1       | a = 1      |
|             | b = 2      |
+-------------+------------+
12
  • i use ``` concatenated with the lenguaje example ```php and a new line to start my code... Dec 4, 2021 at 15:22
  • When my questions or answers include or need data from a database: I usually use 2 tools: the html table that makes it easy to copy to excel and create a csv that can be imported ... or an external repository if it is very large like: sqlfiddle.com/#!9/ac62c97/3 Dec 4, 2021 at 15:25
  • in sites like SO and esSO we need more emulation for languages ... mainly database ... since users usually ask for a minimum reproducible example ... but it is a bit difficult or complex if the site does not have a tool to do as the database case. Dec 4, 2021 at 15:26
  • @Arcanis-TheOmnipotent Thanks! Can you link to a question or answer where you do this? That would help.
    – joseville
    Dec 4, 2021 at 15:27
  • yes but it is in Spanish; will you have a problem with that? Dec 4, 2021 at 15:27
  • Yes! Si! Spanish is fine (I speak Spanish and even if I didn't, it's the structure of the table I'm interested in). And are you able to have a code block as the content of a table cell? Thanks again!
    – joseville
    Dec 4, 2021 at 15:29
  • 1
    check this: es.stackoverflow.com/a/491912/46896 Dec 4, 2021 at 15:33
  • in this case I use some capture and the external repository; in conjunction with code blocks. Dec 4, 2021 at 15:34
  • Thanks again! I may be mistaken, but I don't see any markdown tables in that Q/A though. I see screen captures of database tables (e.g. .png's) and I see code blocks, but I don't see a code block within a markdown table.
    – joseville
    Dec 4, 2021 at 15:39
  • 1
    join this: chat.stackexchange.com/rooms/132048/walter-nunez Dec 4, 2021 at 15:47
  • @Arcanis - The Omnipotent: Re "we need more emulation for languages ... mainly database": Such proposals are usually not well received by the meta crowd. Dec 4, 2021 at 20:35
  • There are six evil TABs (trailing TABs for some of the table elements) in the Markdown table source after "TablesGenerator.com converts into". Could that cause trouble? There are ways to remove them. Dec 4, 2021 at 20:39

2 Answers 2

5

Here is a: Markdown table, with column spanning, and syntax highlighting, in code blocks:

| Inline code | Code block                 |
|-------------|----------------------------|
| <pre><code>`a = 1`</code></pre>   | <pre><code>a = 1</code><br><code>b = 2</code></pre> |
Inline code Code block
a = 1
a = 1
b = 2
4
  • Thanks! Why are both <pre> and <code> needed?
    – joseville
    Dec 4, 2021 at 22:00
  • @joseville, Imgur isn't allowing me to upload a screenshot to include in this comment otherwise I'd show you that if you remove all the "<pre>" it won't work. --- You can copy the example into a new answer and remove them, proving that it breaks.
    – Rob
    Dec 4, 2021 at 22:15
  • interesting, which browser are you using?
    – joseville
    Dec 4, 2021 at 23:48
  • Firefox Android.
    – Rob
    Dec 17, 2021 at 15:53
5

The answer comes from: https://stackoverflow.com/a/59369423/13881506.

Adding line breaks to a code block

Use the HTML <pre><code> tags to format a code block, which can then include <br> tags to add line breaks:

<pre><code>a = 1<br>b = 2<br></code></pre>

displays as

a = 1
b = 2

which looks identical to a fenced code block (i.e. one using ``` and newline's):

a = 1
b = 2

Code Block within a Markdown Table

The following Markdown table:

| Inline Code   | Block Code                    |
|-------------  |-----------------------------  |
| `a = 1`       | <pre><code>a = 1<br>b = 2</code></pre>    |

displays exactly as desired:

Inline Code Block Code
a = 1
a = 1
b = 2

Specifying a lang attribute in <pre> strips the <pre> HTML tag...

Stack Exchange supports a strict subset of HTML. If you try to use HTML attributes which are not supported, then the HTML tag is completely stripped when Stack Exchange performs the Markdown to HTML conversion. So, adding a lang attribute to the <pre> tag results in it being stripped - the <br>s still produce line breaks, but the entire <pre lang="python"> block stops displaying as a code block and displays as plain text instead, due to the <code>.

For example:

| Inline Code   | Not Block Code (inline code)              |
|-------------  |-----------------------------------------  |
| `a = 1`       | <pre lang="python"><code>a = 1<br>b = 2</code></pre>  |

undesirably displays as:

Inline Code Not Block Code (inline code)
a = 1 a = 1
b = 2

Syntax highlighting will remove the <br> tags

If syntax highlighting is running on the code block, then the <br> tags are stripped when highlight.js runs in the reader's browser (see: 1 (MSO), 2 (MSE)).

For example:

<!-- language-all: python -->

| Inline Code   | The `<br>` is stripped by highlight.js.   |
|-------------  |-----------------------------------------  |
| `a = 1`       | <pre><code>a = 1<br>b = 2</code></pre>    |

displays without the <br> as:

Inline Code The <br> is stripped by highlight.js.
a = 1
a = 1
b = 2
12
  • What do you mean? The background gray of the inline code in the table does look a bit darker than the background gray of the block code in the table to me, but that's also the case outside the table.
    – joseville
    Dec 4, 2021 at 16:15
  • @bobble you can show that ... Dec 4, 2021 at 16:18
  • It seems to me that you should add this as a lack of support ... because it would be nice if it supported the lang attribute, although I don't know if you have any reference links that browsers support this; as far as I understand it is the country code in that place, instead of adding it as a response to the post. Dec 4, 2021 at 16:30
  • How do I submit a feature request or bug?
    – joseville
    Dec 4, 2021 at 16:31
  • in the same way that you just placed this post but at the end you put: it is possible to support the lang attribute? but you have to argue saying that browsers support it because I have not found it ... Dec 4, 2021 at 16:33
  • I might in the future.
    – joseville
    Dec 4, 2021 at 16:34
  • 3
    Using the lang attribute for that is misuse of that attribute. The attribute is meant to be one of the IANA language subtags per w3.org and represent the human language the content is written in, using it for anything else can screw with screen readers/HTML interpreters/validators etc. Highlight.js uses classes, if anything we should either use those, or a HTML5 data attribute (e.g. data-lang would be fine)
    – Erik A
    Dec 4, 2021 at 16:50
  • @ErikA can you provide a example of data-lang implementation??? Dec 4, 2021 at 17:36
  • 3
    @ErikA SE permits only a very limited subset of HTML. See: "What HTML tags are allowed on Stack Exchange sites?" If you use anything other than what's specified there (e.g. including a class attribute), then the tag is stripped from the post in the Markdown to HTML conversion. You can use the HTML comment-like method of indicating a specific code syntax formatting language. However, highlight.js will strip any HTML formatting from within the code which it highlights, so if you want the <br> elements, then you can't have syntax highlighting.
    – Makyen
    Dec 4, 2021 at 18:41
  • 4
    I'm aware, it's just that if SE were to allow some way to specify programming language for code tags outside of the comment, it should not be the lang attribute, but either just a whitelist for what Highlight.js already uses (specific class attributes) or a data attribute imo.
    – Erik A
    Dec 4, 2021 at 19:28
  • 3
    Interestingly the "Code Block within a Markdown Table" method doesn't work for me while opted in to the new editor. The code breaks out of the table. Dec 4, 2021 at 19:48
  • @Makyen thanks for the edit!
    – joseville
    Dec 4, 2021 at 21:52

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .