This is how to use Markdown inside HTML blocks

Share & showcase
1

Steps

Add any non-reserved character (including any HTML inline elements) before your HTML code (all following lines have to be indented to remain in scope)

Examples

A table

<br><table>
	<tr>
		<td>[*Italic Link*](https://example.com)</td>
		<td>[*Italic Link*](https://example.com)</td>
	</tr>
	
	<tr>
		<td colspan=2>
		Area of a circle: $\pi r^2$
		</td>
	</tr>
</table>

An ordered list

<br><ol>
	<li>**Bold Text**</li>
	<li>[==Highlighted Link==](https://example.com)</li>
</ol>

Preview

Examples

Notes and Limitations

  • Any following lines have to be indented to remain in scope
  • All markdown block elements become inline (new lines are converted to space + 2 tabs)
  • New lines are not ignored
1 Like
2

Cool! This is nice trick. The explanation is that the codes above are part of one paragraph in markdown. The indentation (4 or more spaces) prevents html blocks and then any html tags in indented lines are interpreted as inline html content. Intended code blocks from 4 or more spaces are not triggered because these spaces are interpreted as part of a paragraph. The empty line in the first code is interesting—I’m not sure why it doesn’t trigger new paragraph.

Similarly <table> doesn’t begin html block because it is preceded by > and <br> doesn’t begin html block because it is followed by <. And </table> should begin html block that must be ended but I tested that you can also intend that final line ····</table>. Something strange might happen with <table> because it looks like creating a html block where content is parsed as html. Apparently that is documented in GitHub Flavored Markdown Spec but it’s complex and difficult to understand.

1 Like
3

This was actually a mistake in the post, I didn’t add it in the code which is previewed, however adding it makes no difference as long as that line has at least one indent

Here’s is what happens if that line has no indents

Also, all new lines (including lines which contain parts of the table’s code and including the <br>) are converted to empty div elements that are all added before the div containing the table

HTML Structure

4

HTML Structure

5

Yes thanks. Nested <table> inside <p> is what I expected originally. The question I raised is that why intended empty line is not treated as blank line that should terminate a paragraph according to GFM Spec. The GFM Spec clearly states that blank line is allowed to contain spaces and tabs—and no other details are provided—which implies a line containing both tabs and spaces but nothing else is treated as blank line as well.

6

You’re correct, that code with new line containing tabs doesn’t work like that on GitHub

image

This however doesn’t apply if there was Markdown in-between after the first new line, here is an example:

<h1>


[*Italic Link*](https://example.com)


[*Another Italic Link*](https://example.com)
</h1>

image
image957Ă—148 5.26 KB

Anyways, Obsidian doesn’t strictly follow GFM, here is an example

7

I tested this on Obsidian and reading view produces blank <h1> and two <p>. In live preview one <h1> is produced without inline formatting. Obviously your trick can be used to achieve markdown in html elements (in reading view):

<hello><h1>
	[*Italic Link*](https://example.com)
	[*Another Italic Link*](https://example.com)
	</h1>

Do you have any practical use for it? For example markdown tables in Obsidian already support nested markdown.

8

I don’t currently have something in mind except using LaTeX and Obsidian internal links which can’t be used otherwise

This trick generally allows to use the easy markdown syntax within the advanced HTML

9

Thanks. It was nice to have discussion with you! Maybe later in future we can find proper use for additional html. Currently it is useful in templates since you don’t have to type the html code manually every time. Templates could include also inline templates. In theory inline html templates could implement some useful inline features such as interactive text or pictures—although we already have syntax for one click show/hide content using foldable callouts. Other very common use case is underlining but this could be replaced by strikethrough ~~text~~ or highlight ==text== with some proper CSS code. The need for using <u> tags or any similar inline formatting tags is not very real since you can use ~~text~~ and apply CSS to achieve any visual inline text appearance.

1 Like
10

You’re welcome! I’ve never used templates before, but I got to try them one day

If you’re talking about using HTML in Markdown notes in general rather than what this trick adds, then here are few things that HTML allows you to do while GFM can’t

11

Doesn’t work, I pasted your code into a new note, the markdown is not rendered

12

Just tested, you’re right… An update has made this broken, but it wasn’t an intentional feature to begin with

13

I see, thanks for confirming. 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.

14

Yes, it’s a considerable limitation…

1 Like