Inline HTML breaks when using indentation

rokejulianlockhart · November 23, 2024, 8:34pm

@RogerDodger, I have officially requested this for VS Code at the undermentioned, if of use:

Allow disabling indented code blocks in the Markdown previewer.

opened 08:32PM - 23 Nov 24 UTC

#### Desire As [I've poorly aforedescribed at `reddit.com/r/vscode` (to 5 upvot…es)](https://www.reddit.com/r/Markdown/comments/1g8t2xt/can_markdowns_indented_code_blocks_be_disabled_in/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button), I want a way to disable the conversion of a single tab or 2 spaces to a `<pre><code>`. Instead, I want it these to merely be ignored (as they are in other markup languages, like HTML). #### Rationale I author most of my markup in HTML, because it provides significantly more versatile and semantic markup capabilities. However, it has an (ultimately non-inherent, but in-practice) significant failure — `<code>` tags are not automatically syntax-highlighted by any parsers. Markdown, being a superset of HTML, improves this perfectly. As an example, when I render the undermentioned in VS Code with the PowerShell extension installed, I see beautiful colours: ~~~MD <tr> <th> Construction </th> <td> ```PS1 ${'Status'} = [PSCustomObject]@{ 'Non-Chronological' = 'Indeterminate'; 'Chronological' = [PSCustomObject]@{ 1 = @( 'Uncommenced', 'Commenced' ); 2 = @( 'Completed', 'Cancelled' ) } } ${'Person'} = [PSCustomObject]@{ 3 = ''; 1 = ''; 2 = '' } ``` </td> </tr> ~~~ However, that's really difficult to read. It gets exponentially more difficult if, for example, you have nested tables with code blocks in each. At that stage, I basically have to re-indent and then de-indent each time I modify the markup. It's a dreadful workflow. Instead, it should be the undermentioned: ~~~MD <tr> <th> Construction </th> <td> ```PS1 ${'Status'} = [PSCustomObject]@{ 'Non-Chronological' = 'Indeterminate'; 'Chronological' = [PSCustomObject]@{ 1 = @( 'Uncommenced', 'Commenced' ); 2 = @( 'Completed', 'Cancelled' ) } } ${'Person'} = [PSCustomObject]@{ 3 = ''; 1 = ''; 2 = '' } ``` </td> </tr> ~~~ However, all beneath the first `<td>` shall render in a `<pre><code>`. This is, of course, a basic example, where the aforedescribed potential complexity is less evident. However, I can provide incredibly complex examples if necessary. #### Feasibility Per https://github.com/11ty/eleventy/issues/2438#issuecomment-2464912554, this should be possible in VS Code, since `markdown-it` appears to be the parser that VS Code uses, and it supports the ability to disable indented code blocks. #### Corroberations 1. ["A switch that disables code blocks by indenting" at `forum.obsidian.md/t/21764`](https://forum.obsidian.md/t/a-switch-that-disables-code-blocks-by-indenting/21764/1?u=rokejulianlockhart) <blockquote> For years I’ve been using apps that “use Markdown” like Bear and Ulysses. So I would often tab underneath a header for typing because I visually like to indent different topics. Well, turns out that those apps were really using “Markdown flavors”. It was like Markdown lite. So now that I’m using Obsidian that uses the full Markdown specs, when I try and indent underneath a header, I get a code block! That technically is correct, but I hate it! I can’t write the way I normally like to write. I would love a simple switch that says something along the lines of “disable code blocks by indenting” or something to that effect. I would still be able to do a code block using the three ticks. </blockquote> 1. ["Inline HTML breaks when using indentation" at `talk.commonmark.org/t/3317`](https://talk.commonmark.org/t/inline-html-breaks-when-using-indentation/3317/1?u=rokejulianlockhart) [^1] <blockquote> The only input I found that works [...] requires: 1. Inner markdown body not indented at all 2. Blank line between first para and HTML 3. No blank line between second para and HTML If there *is* a blank line between second para and the HTML, then the HTML gets parsed as an indented code block and breaks the HTML. </blockquote> 1. https://github.com/jgm/pandoc/issues/2120#issue-71270331 1. https://github.com/11ty/eleventy/issues/2438#issue-1271419451 1. ["Disable “indent -> code block”" at `forum.obsidian.md/t/19173`](https://forum.obsidian.md/t/disable-indent-code-block/19173/1?u=rokejulianlockhart) <blockquote> #### **Situation** I often indent lists and put an empty line in between for visual distrinction. #### **Problem** Obsidian recognizes that as code and colors the line red. #### **What I’m trying to do** Turn off code blocks alltogether, or turn off the indent → code block function. </blockquote> 1. ["Break Markdown: Option to change default tab / indent behavior / Do not create code block" at `forum.obsidian.md/t/8741/5`](https://forum.obsidian.md/t/break-markdown-option-to-change-default-tab-indent-behavior-do-not-create-code-block/8741/5?u=rokejulianlockhart) > If there’s an empty line in between, the indent will default to code. If anybody found a solution, please let me know. 1. ["This is how to use Markdown inside HTML blocks" at `forum.obsidian.md/t/74435/14`](https://forum.obsidian.md/t/this-is-how-to-use-markdown-inside-html-blocks/74435/14?u=rokejulianlockhart) > It’s sad we can’t combine HTML with Markdown, I really wanted to use the metabind plugin in an html table, but since HTML goes separately, that really limits the amount of customization we can have. 1. ["Change the code block button from inserting indentation to triple-backticks" at `meta.stackoverflow.com/revisions/414866/1`](https://meta.stackoverflow.com/revisions/414866/1#:~:text=Indentation%20is%20also%20used%20with%20lists%20(bullet%20and%20numbered)%2C%20making%20it%20more%20confusing%20how%20to%20properly%20indent%20a%20block%20inside%20them.%20Fenced%20blocks%20provide%20a%20separate%20syntax%2C%20simplifying%20the%20markup%20for%20indenting%20a%20block%20inside%20a%20list.): > Indentation is also used with lists (bullet and numbered), making it more confusing how to properly indent a block inside them. Fenced blocks provide a separate syntax, simplifying the markup for indenting a block inside a list. [^1]: [`talk.commonmark.org/t/3317/6`](https://talk.commonmark.org/t/inline-html-breaks-when-using-indentation/3317/6?u=rokejulianlockhart)

Some demonstrations of support would be really useful.