Can we support Basic formatting syntax in table cell?

[CR24]

Use case or problem

I need to write a lot of content next to images, so I use tables with one column for images and one for text
But it bothers me a bit to find out that the mardown syntax is not supported in cells

Proposed solution

Wish markdown syntaxes could be nested within each other.

Current workaround (optional)

In Lark

[WhiteNoise]

The problem is that markdown itself doesn’t support what you are asking.
There’s no mardown formatting in table. The whole document is markdown and there are no lists in table cells.

There are a two or three fr that are more detailed about this.
I am gonna move this to help.

[holroy]

This is not a very easy task to accomplish using markdown tables like it seems you would like to use. There are few ways you can approach this though, and I show case the ones I’ve seen so far.

Using embeds

The following code:

| Example                             | Explanation    |
| ----------------------------------- | -------------- |
| ![[pexels-pixabay-416179.jpg\|400]] | ![[bird text]] |

With your example text in the “bird text” note and using the GitHub theme this displays as:

This do however require you to keep the extra text in a separate document, but it do allow for you to embed it into the table

Using multi columns

If you download the MCL Multi Column CSS snippet, you can write code like this:

> [!multi-column]
>
>> [!info]+ Example
>> ![[pexels-pixabay-416179.jpg\|400]] 
>
>> [!info]+ Explanation
>> ## Header
>>  Bird
>>- Gray
>>- Stand
>>``` 
>>Code1
>>```

And without any further styling, get output like this:

You could of course change which callouts to use, and whether they should never be collapsible, and most likely which background color you want, and even more stuff. This do allow for both the image reference and the text to be in the same document though.

Using specific CSS

If you created some specific CSS you should be able to do something like this as well:

![[pexels-pixabay-416179.jpg|400]] #_/left
 
## Header
 
Bird
- Gray
- Stand
  
```
Code1
```

The idea here is to use something like the #_/left to be a target for a CSS snippet to float that div to the left, and allow the following text to float around it. For this post I hard-coded this directly in the DOM element using float: left; padding-right: 40px, (and some custom hiding of the tag) . But the idea is sound, and you could get output like the image below:

You might need to insert a clear: both element somewhere, but that’s not too hard to do in that CSS snippet if this is a way forward which looks interesting to you.