Fix single-character code blocks rendering as empty by soniya-malviy · Pull Request #18572 · jupyterlab/jupyterlab

soniya-malviy · 2026-02-27T17:50:30Z

References

Fixes Code with single variable renders into empty block #17779
Closes Code with single variable renders into empty block Solved #18285 (replaces)

This PR fixes a bug in JupyterLab’s highlighting helper (/packages/codemirror/src/language.ts) where single-character code blocks like x rendered as empty blocks.

Root cause:

The helper used tree.length - 1 (number of syntax tree nodes) instead of code.length (actual string length) and did not handle the case where highlightTree emits no tokens. As a result, unrecognized single-character identifiers could be dropped even though the input code string was valid.

This PR:

Adds a fallback that renders the raw code string when no tokens are emitted.
Uses code.length to compute the remaining text instead of tree.length.
This addresses the issue at the source of the data loss in JupyterLab’s wrapper code, rather than post-processing rendered HTML. It applies to all code highlighting that uses this helper, not just markdown.
I previously attempted to fix this in renderers.ts, but that approach only treated the symptom (empty <code> blocks) and required HTML post-processing. This PR replaces that with a root-cause fix in language.ts.

Code changes

BEFORE (Buggy Code):

File: packages/codemirror/src/language.ts (lines 250-253)


 if (pos < tree.length - 1) {
      // No style applied on the trailing text
      el.appendChild(document.createTextNode(code.slice(pos, tree.length)));
    }

AFTER (Fixed Code):


 if (pos === 0 && code.length > 0) {
      // No tokens were emitted (e.g., single unrecognized character like 'x')
      // Render the entire code as plain text fallback
      el.appendChild(document.createTextNode(code));
    } else if (pos < code.length) {
      // Handle any remaining unstyled content
      el.appendChild(document.createTextNode(code.slice(pos, code.length)));
    }

Proofs

jupyterlab.mp4

jupyterlab-probot · 2026-02-27T17:50:33Z

Thanks for making a pull request to jupyterlab!
To try out this branch on binder, follow this link:

krassowski

Great, thank you for investigating it! Can you also add a test case that would fail before and pass after this change in:

jupyterlab/packages/codemirror/test/language.spec.ts

Lines 48 to 66 in 92c8993

    
               describe('#highlight', () => { 
        
                 it('should load a defined spec', async () => { 
        
                   const container = document.createElement('pre'); 
        
                   await languages.highlight( 
        
                     `(defun check-login (name password) ; absolutely secure 
        
                 (if (equal name "admin") 
        
                   (equal password "12345") 
        
                   #t))`, 
        
                     languages.findBest('text/foo'), 
        
                     container 
        
                   ); 
        
                   expect(container.innerHTML).toEqual( 
        
                     `<span class="ͼ19">(</span>defun check-login <span class="ͼ19">(</span>name password<span class="ͼ19">)</span> <span class="ͼ11">; absolutely secure</span> 
        
                 <span class="ͼ19">(</span>if <span class="ͼ19">(</span>equal name <span class="ͼ12">"admin"</span><span class="ͼ19">)</span> 
        
                   <span class="ͼ19">(</span>equal password <span class="ͼ12">"12345"</span><span class="ͼ19">)</span> 
        
                   <span class="ͼ1d">#t</span><span class="ͼ19">)</span><span class="ͼ19">)</span>` 
        
                   ); 
        
                 }); 
        
               });

soniya-malviy · 2026-02-27T18:05:46Z

Great, thank you for investigating it! Can you also add a test case that would fail before and pass after this change in:

jupyterlab/packages/codemirror/test/language.spec.ts

Lines 48 to 66 in 92c8993

describe('#highlight', () => {

it('should load a defined spec', async () => {

const container = document.createElement('pre');

await languages.highlight(

`(defun check-login (name password) ; absolutely secure

(if (equal name "admin")

(equal password "12345")

#t))`,

languages.findBest('text/foo'),

container

);

expect(container.innerHTML).toEqual(

`(defun check-login (name password) ; absolutely secure

(if (equal name "admin")

(equal password "12345")

#t))`

);

});

});

@krassowski sure

krassowski

Thank you @soniya-malviy!

…ing as empty

soniya-malviy · 2026-02-27T21:11:53Z

Thank you @soniya-malviy!

Thank you @krassowski for reviewing and merging it—thrilled to be part of the project! 🚀

…rendering as empty) (#18574) Backport PR #18572: Fix single-character code blocks rendering as empty Co-authored-by: Soniya Malviya <151515611+soniya-malviy@users.noreply.github.com>

Fix single-character code blocks rendering as empty

9395a72

github-actions Bot assigned soniya-malviy Feb 27, 2026

github-actions Bot added the pkg:codemirror label Feb 27, 2026

krassowski added the bug label Feb 27, 2026

soniya-malviy mentioned this pull request Feb 27, 2026

Code with single variable renders into empty block Solved #18285

Closed

5 tasks

krassowski reviewed Feb 27, 2026

View reviewed changes

krassowski added this to the 4.5.x milestone Feb 27, 2026

soniya-malviy and others added 2 commits February 28, 2026 00:15

added tests for single character rendering

3008426

Merge branch 'main' into language.ts

ff264f9

krassowski approved these changes Feb 27, 2026

View reviewed changes

krassowski merged commit 4e38172 into jupyterlab:main Feb 27, 2026
104 checks passed

meeseeksmachine pushed a commit to meeseeksmachine/jupyterlab that referenced this pull request Feb 27, 2026

Backport PR jupyterlab#18572: Fix single-character code blocks render…

d7aef9f

…ing as empty

meeseeksmachine mentioned this pull request Feb 27, 2026

Backport PR #18572 on branch 4.5.x (Fix single-character code blocks rendering as empty) #18574

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix single-character code blocks rendering as empty#18572

Fix single-character code blocks rendering as empty#18572
krassowski merged 3 commits intojupyterlab:mainfrom
soniya-malviy:language.ts

soniya-malviy commented Feb 27, 2026 •

edited by krassowski

Loading

Uh oh!

jupyterlab-probot Bot commented Feb 27, 2026

Uh oh!

krassowski left a comment

Uh oh!

soniya-malviy commented Feb 27, 2026

Uh oh!

krassowski left a comment

Uh oh!

Uh oh!

soniya-malviy commented Feb 27, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	describe('#highlight', () => {
	it('should load a defined spec', async () => {
	const container = document.createElement('pre');
	await languages.highlight(
	`(defun check-login (name password) ; absolutely secure
	(if (equal name "admin")
	(equal password "12345")
	#t))`,
	languages.findBest('text/foo'),
	container
	);
	expect(container.innerHTML).toEqual(
	`<span class="ͼ19">(</span>defun check-login <span class="ͼ19">(</span>name password<span class="ͼ19">)</span> <span class="ͼ11">; absolutely secure</span>
	<span class="ͼ19">(</span>if <span class="ͼ19">(</span>equal name <span class="ͼ12">"admin"</span><span class="ͼ19">)</span>
	<span class="ͼ19">(</span>equal password <span class="ͼ12">"12345"</span><span class="ͼ19">)</span>
	<span class="ͼ1d">#t</span><span class="ͼ19">)</span><span class="ͼ19">)</span>`
	);
	});
	});

Uh oh!

Conversation

soniya-malviy commented Feb 27, 2026 • edited by krassowski Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

References

Root cause:

Code changes

Proofs

Uh oh!

jupyterlab-probot Bot commented Feb 27, 2026

Uh oh!

krassowski left a comment

Choose a reason for hiding this comment

Uh oh!

soniya-malviy commented Feb 27, 2026

Uh oh!

krassowski left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

soniya-malviy commented Feb 27, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

soniya-malviy commented Feb 27, 2026 •

edited by krassowski

Loading