(optionally) format code blocks and callouts as tables

[vicrdguez]

First of all, thanks for the plugin, is filling a big gap for me!

Is your feature request related to a problem? Please describe. In apps like google docs there is no direct translation for code blocks or callouts.

One alternative I've found that works really well is using tables.

Describe the solution you'd like Code blocks A single row, single column table with mono font, no borders and background color:

Callouts Two row, single column table, first row has the type of callout or title, the second the content. Borderless and with background colors:

This could be enabled/disabled from the plugin options, the custom css will help to customize the colors Not sure about how difficult this would be, but I thought was a nice suggestion to made. What do you think?

[vicrdguez]

Taking a look at the code I was thinking about something similar to the removeButtons for example.

Something like

        node.querySelectorAll('code')
            .forEach(node => asTable(node));

I know barely nothing about ts so I might be completely off here though 😅

[mvdkwast]

Hi @vicrdguez , thanks for your interest. I will try to look at this week, it's an interesting feature and shouldn't be too hard to implement.

[mvdkwast]

Hi @vicrdguez, I pushed a branch with a sample implementation. Not sure yet if there are enough classes to do the CSS. If you want, you can give it a try. If you need me to provide you with a compiled main.js just shout here.

[vicrdguez]

Sorry for the late response! Had no time to try your branch but trying the new version I think it works amazing!

Looks like gdocs ignores some css but that's on them.

[mvdkwast]

I'm glad it works for you. If you have managed to make better looking CSS, please feel welcome to share it :)