Skip to content

feature: Nested code blocks width calculation #580

@Kayzels

Description

@Kayzels

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:

Image

Without Render Markdown:

Image

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:

Image Image

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" })

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions