feature: Nested code blocks width calculation #580
Description
Is your feature request related to a problem? Please describe.
The markdown spec allows having code blocks inside code blocks. This can be done by having them start with three backticks and then three tildes, or vice versa, or by increasing the number of them for the starting block.
This works (as long as there's a treesitter parser for each of the languages defined for it, so I just needed to register that tabs here should link to the markdown parser).
Render Markdown limits the widths of the inner ones background, rather than extending them to the outer one's width.
It will be quite confusing indicating what I mean because the Github markdown renderer will probably change the characters to be code blocks, and I'm not sure if there's a way to indicate that they should be kept "raw".
With Render Markdown, they are rendered nicely, but it would be cool if the width of the inner ones could be the same as the width of the outer, or be a different color. At the moment, this is what it looks like, using Render Markdown:
Without Render Markdown:
The code itself (might be messed by Github, there are 4 backticks at the top and bottom):
tab: HTML
```html
<form>
<label for="mail">
I would like you to provide me with an email address:
</label>
<input type="email" id="mail" name="mail" />
<button>Submit</button>
</form>
```
tab: Javascript
```javascript
const email = document.getElementById("mail");
email.addEventListener("input", (event) => {
// Validate with the built-in constraints
email.setCustomValidity("");
if (!email.validity.valid) {
return;
}
// Extend with a custom constraint
if (!email.value.endsWith("@example.com")) {
email.setCustomValidity("Please enter an email address of @example.com");
}
});
```
It's very minor, but a bit jarring that the blocks' widths don't match. Which means it doesn't feel like the single unit I think of it as.
The main use case for the inner code blocks is that I use an Obsidian plugin called tabs, that allows having different tabs that you can click between. These are done using a code block. And then, I can have code blocks inside that. Inside Obsidian, this is what it ends up looking like:
Describe the solution you'd like
Either the nested code blocks could have a different background color, and the outer code block background color could extend into the cells that don't use the inner background color, or the nested code blocks background should extend to be the same width as the outer one.
Describe alternatives you've considered
This is relatively minor, so I haven't really looked at alternatives: just thought I'd bring this up, if there was a solution. I don't really understand how the background is getting determined, otherwise I'd try a pull request that solves this (and if I did, I'd probably also try and make it so that callout blockquotes could also have a background)
Additional information
The config for the code block above, in Render Markdown, is
{
"MeanderingProgrammer/render-markdown.nvim",
---@module 'render-markdown'
---@type render.md.UserConfig
opts = {
code = {
border = "thin",
sign = true,
width = "block",
right_pad = 1,
},
},
}Also, to get the code rendering with syntax highlighting with "tabs" as the language needs you to register it using treesitter (by default, it would just show in the code block color, with no syntax highlighting)
vim.treesitter.language.register("markdown", { "tabs" })