microsoft / microsoft/vscode

Markdown editor: Short fenced code blocks reserve space for hidden fence lines

Open
#328,940 0 comments 0 reactions 1 assignee Claimed by @ulugbekna View on GitHub
Dominant language
TypeScript
Stars
193k
Forks
42.4k
PR merge metrics
PR metrics pending

Description

## Description

Short fenced code blocks occupy substantially more vertical space than their rendered content in the experimental Markdown editor. A two-line snippet appears as a roughly six-line-tall box, reducing scanning density in documents with several small examples.

## Reproduction

1. Open the experimental Markdown editor fixture at `http://localhost:5178/?theme=vscode-default` in a 1280 × 800 CSS-pixel viewport.
2. Set the document to:

```markdown
Before

```ts
const x = 1;
const y = 2;
```

After
```

3. Leave the fenced block inactive so that the Markdown fence markers are hidden.
4. Inspect the `.md-code-block` box and its children.

The same visual result can be seen by opening this content with **Markdown Editor (Experimental)** and leaving the block inactive.

## Expected

An inactive two-line snippet has compact, proportionate spacing around its two visible lines. Activating the block may reveal the fences, but the inactive presentation should not permanently look as tall as a four-line source block.

## Actual

At the tested viewport and default VS Code Markdown theme:

- `.md-code-block` is **900 × 109.97 px**.
- Its two visible code lines occupy approximately **35.49 px**.
- Computed block styling is `padding: 16px`, `border: 1px`, and `line-height: 18.998px`; there is no `min-height`.
- After subtracting padding and border, the content box is approximately **75.97 px**, or four line boxes, even though only two code lines are visible.

## Root Cause

**Confirmed:** inactive opening and closing fences remain in inline layout. In `packages/markdown-editor/src/view/editor.css`, `.md-marker-openFence.md-marker-hidden` and `.md-marker-closeFence.md-marker-hidden` override the general hidden-marker rule with `display: inline; visibility: hidden`. The accompanying comment says this intentionally keeps active and inactive code-block heights identical. Computed styles and DOM inspection confirm both hidden fence spans retain layout boxes.

The VS Code default theme also adds 16 px of padding on every side in `packages/markdown-editor/src/view/themes/vscode-default.css`. The issue is not caused by a minimum height.

## Additional Context

This is related to the general layout-stability goal in #327538, but the fenced-block case has the opposite usability cost: preventing activation shift by reserving both invisible fence lines makes every inactive short snippet unnecessarily tall. A solution should preserve stable interaction where possible without requiring inactive blocks to reserve full visible-source height.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.