Rendering of indented code blocks concatenates lines

• [✅] I’ve read the [contribution guidelines] [✅] and agree with them

I’ve found a bug and checked that …

• [✅] … the problem doesn’t occur with the default MkDocs template

• [✅] … the problem is not in any of my customizations (CSS, JS, template)

• [✅] … the documentation does not mention anything about my problem

  not that I have been able to find

• [✅] … there are no open or closed issues that are related to my problem

  not that I have been able to find

Description

I think there is a rendering problem with code blocks that are indented inside bullet and numbered lists, where individual code block lines are concatenated.

Every other markdown rendering engine I have tried renders each line inside the code fence on a line by itself. Material is the only rendering engine that seems to concatenate lines.

Expected behavior

in this case, the rendering is by GitHub (ie this issue) between the horizontal rules:

---

Lead in:

1. First:

   $ sudo apt update
   $ sudo apt upgrade -y
   

2. Second.

---

Actual behavior

this is what Material seems to do (concatenation):

---

Lead in:

1. First:

   $ sudo apt update $ sudo apt upgrade -y
   

2. Second.

---

Package versions

$ python --version
Python 3.7.3

$ pip --version
pip 21.1.1 from /usr/local/lib/python3.7/dist-packages/pip (python 3.7)

$ mkdocs --version
mkdocs, version 1.1.2 from /home/pi/.local/lib/python3.7/site-packages/mkdocs (Python 3.7)

$ pip show mkdocs-material | grep -E ^Version
Version: 7.1.3

$ pip list | grep -e "^mkdocs"
mkdocs                      1.1.2
mkdocs-awesome-pages-plugin 2.5.0
mkdocs-material             7.1.3
mkdocs-material-extensions  1.0.1

System information

$ uname -a
Linux sec-dev 5.10.17-v7l+ #1403 SMP Mon Feb 22 11:33:35 GMT 2021 armv7l GNU/Linux

• Browsers: The problem is “browser independent”. I have tried Safari, Firefox and Chrome, and on both macOS and iOS.

Test setup

Directory structure:

$ tree .
.
├── docs
│   └── test.md
└── mkdocs.yml

Test file:

$ cat docs/test.md
Lead in:

1. First:

	```
	$ sudo apt update
	$ sudo apt upgrade -y
	```

2. Second.

Dump of test file:

$ hexdump -C docs/test.md 
00000000  4c 65 61 64 20 69 6e 3a  0a 0a 31 2e 20 46 69 72  |Lead in:..1. Fir|
00000010  73 74 3a 0a 0a 09 60 60  60 0a 09 24 20 73 75 64  |st:...```..$ sud|
00000020  6f 20 61 70 74 20 75 70  64 61 74 65 0a 09 24 20  |o apt update..$ |
00000030  73 75 64 6f 20 61 70 74  20 75 70 67 72 61 64 65  |sudo apt upgrade|
00000040  20 2d 79 0a 09 60 60 60  0a 0a 32 2e 20 53 65 63  | -y..```..2. Sec|
00000050  6f 6e 64 2e 0a                                    |ond..|

No extraneous whitespace. No weird characters. Standard Unix 0x0A line-endings. Last line terminated properly.

Tests

Test 1 - material

$ cat mkdocs.yml 
site_name: Test
site_description: 'demonstrate concatenated code-block lines'
theme:
  name: material
  features:
    - tabs
  plugins:
    - search
    - awesome-pages

Notes:

1. Material runs the two sudo statements together.
2. Apart from changing the site name and description, this mkdocs.yml is “as it comes” from SensorsIot/IOTstack. I have, however, repeated all these tests without the “awesome-pages” and it makes zero discernible difference to the outcome.

Test 2 - mkdocs

$ cat mkdocs.yml 
site_name: Test
site_description: 'demonstrate concatenated code-block lines'
theme:
  name: mkdocs
  features:
    - tabs
  plugins:
    - search
    - awesome-pages

“mkdocs” renders the sudo statements on two lines.

Test 3 - readthedocs

$ cat mkdocs.yml 
site_name: Test
site_description: 'demonstrate concatenated code-block lines'
theme:
  name: readthedocs
  features:
    - tabs
  plugins:
    - search
    - awesome-pages

“readthedocs” renders the sudo statements on two lines.

Test 4 - MacDown (side-by-side markdown editor)

“MacDown” renders the sudo statements on two lines.

Other examples:

Compare/contrast:

• GitHub rendering
• mkdocs + material rendering

I don’t know what process is used to get the GitHub “original” to the mkdocs rendered version. The material point (pun intended) is that it doesn’t occur on my hardware so the test results shown in this issue aren’t likely to be explained by some peculiarity of my Raspberry Pi system.

It was, in fact, the other way around. I noticed the problem on the IOTstack documentation pages and set about trying to see whether I could replicate the problem on my own hardware. I could, so the problem appears to follow Material.

[Paraphraser]

I did notice the misalignment but I didn’t think it polite to remark on it, particularly when I had no idea what was going on.

Again, many thanks for this.

[Paraphraser]

Brilliant! Thanks so much.

Any idea why Material needs this extra option? I’m thinking that if all the other renderers I tried didn’t need a special setting, there must be some logical reason why Material has it off by default.