microsoft / microsoft/monaco-editor

[Bug] Markdown Syntax: Nested Html tags inside of Markdown that span multiple lines render incorrectly

Open
#5,400 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

~spam
Dominant language
JavaScript
Stars
46.8k
Forks
4.1k
Avg merge
17h 58m
Merged PRs (30d)
1

Description

Reproducible in vscode.dev or in VS Code Desktop?
  • Not reproducible in vscode.dev or VS Code Desktop
Reproducible in the monaco editor playground?
Monaco Editor Playground Link

https://microsoft.github.io/monaco-editor/playground.html?source=v0.55.1#XQAAAAIoBQAAAAAAAABBqQkHQ5NjdMjwa-jY7SIQ9S7DNlzs5W-mwj0fe1ZCDRFc9ws9XQE0SJE1jc2VKxhaLFIw9vEWSxW3yscw7w6zxH_KnD-tsx_JEjspAd-fBsopUVtJDpZicQGyDEjFPoZU-KMlBx4h2JTZJgtNx0tLOMYgGBGlmW-mYyDrYAGqxI0ee0z4uCJdG3bGI91dQjHUeLbh7xP70DksLO4TPkJ4On86YorlRRaD3nfaaGH-i9h8T-XamMjY48QO3YJqE5q6OgipImDDmVdoc_87wrPflBI6aAQAcJgpdJu2zAs6js5hsKXp-yRUAc3AdrvMEhEElS6pKneqbTA3KxRpdK1dKdEtdLt0eYZIMsCznnrbIdoh4qtYq4wuDK3DlwUofW8LT5C2Vn-T7E2hC3ETExtLGNDR1slExVagYxS1xe8iNoxNzUkdgWn9KYDCplZglbhp735GGBdVp9cIqLtrA__R9cMvmiW7imUvYmxp87uzE86670CUTiJzlwqi1QXq0Veij2PpMFH4zS5SXnnuDWXwVHX4cLcZSkBtZOfFd7yT2H2I0cz1SFzsCqHNphO3yTkjz4KA1MhADzVB4zXgKgejqexg_vibj5fWrdl2qteDr87VobRCxaDFbraa495JoEc0cWPCrsY7D5LruYPsvfmi9shBN2Xz3yPoTg6NbxlkUSD0b-nW_voV0_7I3ZpCJwX8vYeci87WJLkKF3siJUJE3HluNXNdoMkW8jiyhvcVZ8A3Hw6lceCUi0PgP7fRQ_qgir4AQ1U7up-gPIaTSIQfPy1TZoFKW3Cr1PdWiKsISCGFetO3ysQ9Q67ahWhr_1FwkSBt6vni5UP3EVEBFstmqB0_ZcwwmNK1GmXxCuwQlg6BXs05vhcZ85DDzjti61unQvnjY8aBR2kcixlZfKXToIELP6mvM_APEvKgURpiyizYfgfQNGWhtcU4zVTHbvW4gOSCxC-3Nl32yrbCsNGADf4WrZNsyW5d0kDhWckoi_2_o_KJms4fYBq7e6GhNtmqQpSY5TiAO0B5vMOnSeLwsvDBHR-2plFEcEvk0JAGVIv_-UxzFQ

Monaco Editor Playground Code
// Through the options literal, the behaviour of the editor can be easily customized.
// Here are a few examples of config options that can be passed to the editor.
// You can also call editor.updateOptions at any time to change the options.

var editor = monaco.editor.create(document.getElementById("container"), {
	value: `
	## Resources

* [Westwind.AspNetCore on Github](https://github.com/RickStrahl/Westwind.AspNetCore)
* [Configure ASP.NET Core to work with proxy servers and load balancers](https://learn.microsoft.com/en-us/aspnet/core/host-and-deploy/proxy-load-balancer?view=aspnetcore-10.0)


<div style="margin-top: 30px;font-size: 0.8em; border-top: 1px solid #eee;padding-top: 8px;">
    <img src="https://markdownmonster.west-wind.com/favicon.png"
         style="height: 20px;float: left; margin-right: 10px;"
         class="image-co" />
    
    this post was created and published with the 
    
    <a href="https://markdownmonster.west-wind.com"
       target="top">Markdown Monster Editor</a>
</div>`,
	language: "markdown",

	lineNumbers: "off",
	roundedSelection: false,
	scrollBeyondLastLine: false,
	readOnly: false,
	theme: "vs-dark",
});
setTimeout(function () {
	editor.updateOptions({
		lineNumbers: "on",
	});
}, 2000);
Reproduction Steps
Image

Notice how the first line highlights in each of the pointed to Html elements, but subsequent lines are painted as plain text.

Actual (Problematic) Behavior

Split Html tag lines should highlight, but do not

Additional Context

VS Code also fails here but it fails in a different way:

Image

It looks like it's only highlighting a single Html tag.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the Monaco Editor Playground link and the embedded TypeScript example, then isolate the Markdown input containing HTML tags split across multiple lines. Compare the highlighting of the first and subsequent lines; done means each line of the multiline HTML elements receives the expected HTML syntax highlighting in the playground.

Written by the indexing model from the issue text.

Assessment

Tech stack
markdown, typescript
Domain
frontend, tooling
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.