Reproducible in vscode.dev or in 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#XQAAAAIJAgAAAAAAAABBqQkHQ5NjdMjwa-jY7SIQ9S7DNlzs5W-mwj0fe1ZCDRFc9ws9XQE0SJE1jc2VKxhaLFIw9vEWSxW3yscw0aLAKAEiAKctgAboa7BDMYJN4ga4GkhMSggRsXm6jL8b9St-UenAzftcdZvGbaj5PqK-az75MxVpUiDROYXmO_z01SNTZe1WoA4CO99-669y6lbzEqLP9Aj8MJfZ7ViUrBSk4eOjHf048GZTz7AHvKKejQI4g1SwmTrA-Hte7mNzoCW6WJjZ_Fio0JJQVZZA8Slj3eujftouSlUOkO9qG31IKleyUDRu4Odug5yg_PZqQ4IuLLrbtSLFU26FB36bBlhs6oWx9Z3A8obsUYcb9V-KhFP_VkLi6ll8lROhiJrwALGQDpV9m-j3QR65JS8TnfxYokrhHILj7uuVgWP1mGeFUvdB41U4TfzIELFpLtRL7vrD_0c3awuHQ3aM9iyBrn7lAj8rV3L12fycjUM
This issue exists in all tested versions (tested back to older versions).
Monaco Editor Playground Code
const value = `/**
* Accesses the first element of an array.
*
* @example
* \`\`\`ts
* A.first([1, 2, 3]); // 1
* A.first([]); // undefined
* \`\`\`
*
* @param array - The input array
* @returns The first element or undefined
*/
export declare function first<T>(array: readonly T[]): T | undefined;
`;
const myEditor = monaco.editor.create(document.getElementById("container"), {
value,
language: "typescript",
automaticLayout: true,
});
Reproduction Steps
- Paste the code above into the Monaco playground
- Hover over the word
first on the last line (const result = first([10, 20, 30]);)
- Observe the hover tooltip
- Notice that the
@example tag and the code block backticks are concatenated on the same line
Actual (Problematic) Behavior
The hover tooltip shows the @example tag concatenated with the opening triple backticks, breaking markdown rendering:
Accesses the first element of an array.
@example — ```ts A.first([1, 2, 3]); // 1 A.first([]); // undefined
*@param*`array` — - The input array
*@returns* — The first element or undefined
The code block is not properly rendered with syntax highlighting, and the formatting is broken. The em dash (—) is inserted by Monaco between the tag and the content, but the newline after @example is ignored, causing the backticks to appear inline.
Expected Behavior
The code block should render properly as a formatted, syntax-highlighted code block, similar to how it appears in VSCode Desktop and vscode.dev.
The @example section should be separated from the code block, and the triple backticks should be recognized as starting a new code block on a new line.
Additional Context
Background
First, thank you for Monaco Editor - it's an incredible tool that powers so many projects! 🙏
I noticed that @example (a standard JSDoc tag) followed immediately by a code block doesn't render properly in Monaco's hover tooltips. Interestingly, VSCode (both desktop and vscode.dev) handles this perfectly, which suggests the solution might already exist in the VSCode codebase.
Current Workaround
Adding descriptive text after @example works great:
/**
* @example Basic usage
* ```ts
* code
* ```
*/
I'm using this workaround in my library documentation for now. While it works, it would be nice to have the flexibility to omit the descriptive text when the code example is self-explanatory, especially since this works fine in VSCode.
Reproducible in vscode.dev or in 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#XQAAAAIJAgAAAAAAAABBqQkHQ5NjdMjwa-jY7SIQ9S7DNlzs5W-mwj0fe1ZCDRFc9ws9XQE0SJE1jc2VKxhaLFIw9vEWSxW3yscw0aLAKAEiAKctgAboa7BDMYJN4ga4GkhMSggRsXm6jL8b9St-UenAzftcdZvGbaj5PqK-az75MxVpUiDROYXmO_z01SNTZe1WoA4CO99-669y6lbzEqLP9Aj8MJfZ7ViUrBSk4eOjHf048GZTz7AHvKKejQI4g1SwmTrA-Hte7mNzoCW6WJjZ_Fio0JJQVZZA8Slj3eujftouSlUOkO9qG31IKleyUDRu4Odug5yg_PZqQ4IuLLrbtSLFU26FB36bBlhs6oWx9Z3A8obsUYcb9V-KhFP_VkLi6ll8lROhiJrwALGQDpV9m-j3QR65JS8TnfxYokrhHILj7uuVgWP1mGeFUvdB41U4TfzIELFpLtRL7vrD_0c3awuHQ3aM9iyBrn7lAj8rV3L12fycjUM
This issue exists in all tested versions (tested back to older versions).
Monaco Editor Playground Code
Reproduction Steps
firston the last line (const result = first([10, 20, 30]);)@exampletag and the code block backticks are concatenated on the same lineActual (Problematic) Behavior
The hover tooltip shows the
@exampletag concatenated with the opening triple backticks, breaking markdown rendering:The code block is not properly rendered with syntax highlighting, and the formatting is broken. The em dash (—) is inserted by Monaco between the tag and the content, but the newline after
@exampleis ignored, causing the backticks to appear inline.Expected Behavior
The code block should render properly as a formatted, syntax-highlighted code block, similar to how it appears in VSCode Desktop and vscode.dev.
The
@examplesection should be separated from the code block, and the triple backticks should be recognized as starting a new code block on a new line.Additional Context
Background
First, thank you for Monaco Editor - it's an incredible tool that powers so many projects! 🙏
I noticed that
@example(a standard JSDoc tag) followed immediately by a code block doesn't render properly in Monaco's hover tooltips. Interestingly, VSCode (both desktop and vscode.dev) handles this perfectly, which suggests the solution might already exist in the VSCode codebase.Current Workaround
Adding descriptive text after
@exampleworks great:I'm using this workaround in my library documentation for now. While it works, it would be nice to have the flexibility to omit the descriptive text when the code example is self-explanatory, especially since this works fine in VSCode.