Inconsistent display of bare indented code blocks and fenced code blocks (```) in Markdown preview

Type: Bug

Steps to reproduce:

1. Open a Markdown editor.
2. Enter the following code:

   
       [short|long] [signed|unsigned] int
       [signed|unsigned] char
       float
       [long] double
   
   ```
   [short|long] [signed|unsigned] int
   [signed|unsigned] char
   float
   [long] double
   ```
   

3. Preview the Markdown, for example by clicking the “Open Preview to the Side” button.

Expected behavior: The two code blocks are rendered the same.

Actual behavior: The two code blocks are rendered with slightly different margins and line heights:

Does this issue occur when all extensions are disabled?: Yes

VS Code version: Code - Insiders 1.71.0-insider (28f604dec81b609dd7e69362585f7a99d4c48f88, 2022-08-19T05:17:14.894Z) OS version: Windows_NT x64 10.0.19042 Modes: Sandboxed: Yes

System Info

Item	Value
CPUs	Intel® Core™ i5-5250U CPU @ 1.60GHz (4 x 1600)
GPU Status	2d_canvas: enabled canvas_oop_rasterization: disabled_off direct_rendering_display_compositor: disabled_off_ok gpu_compositing: enabled multiple_raster_threads: enabled_on opengl: enabled_on rasterization: enabled raw_draw: disabled_off_ok skia_renderer: enabled_on video_decode: enabled video_encode: enabled vulkan: disabled_off webgl: enabled webgl2: enabled webgpu: disabled_off
Load (avg)	undefined
Memory (System)	3.90GB (0.46GB free)
Process Argv	–crash-reporter-id adc3af8c-0978-48bc-aa94-fbd604e9e143
Screen Reader	no
VM	0%

[Chanmoro]

I tried to fix this bug by overriding default rule of code_block. This makes the rendered DOM of code_block and fence are same.

--- a/extensions/markdown-language-features/src/markdownEngine.ts
+++ b/extensions/markdown-language-features/src/markdownEngine.ts
@@ -38,6 +38,10 @@ const pluginSourceMap: MarkdownIt.PluginSimple = (md): void => {
                        originalHtmlBlockRenderer(tokens, idx, options, env, self)
                );
        }
+
+       if (md.renderer.rules['code_block'] && md.renderer.rules['fence']) {
+               md.renderer.rules['code_block'] = md.renderer.rules['fence'];
+       }
 };

Render rule is defined at markdown-it and rule of code_block and fence are differ. It causes make difference of rendered DOM between these.

• code_block

https://github.com/markdown-it/markdown-it/blob/2b6cac25823af011ff3bc7628bc9b06e483c5a08/lib/renderer.js#L30-L36

• fence

https://github.com/markdown-it/markdown-it/blob/2b6cac25823af011ff3bc7628bc9b06e483c5a08/lib/renderer.js#L39-L90

[weartist]

@mjbvz It looks like the spacing between ‘<code’ and ‘<div’ is different due to them using different layers, for this case, should we both use ‘<code<div xxx </div<code’ ?