Figure with caption

[TysonMN]

Shortly after this line of code in my recent blog post, I have two images next to each other. I wanted them both to have a caption.

After adding a blank line under the images, I doubled down on the use of non-breaking spaces (c.f. #83) until I thought it looked good enough. That source is available here.

Is there a better way to add a figure with a caption, especially when I want two figures with captions next to each other?

[loreanvictor]

I suppose the idiomatic markdown way would be using tables. Something like this:

| ![left-image][1] | ![right-image][2] |
| :--------------: | :---------------: |
| C# output        | F# output         |

[1]: https://tysonwilliams.coding.blog/src/assets/images/cancellation_wait_wait_canceled.gif
[2]: https://tysonwilliams.coding.blog/src/assets/images/cancellation_wait_canceled_wait.gif

C# output	F# output

You might want to add some styles for tables (I personally prefer adding a <style/> tag to <Page/> content in .codedoc/content/index.tsx to make sure it is looking exactly as you want it too.

Other methods I can think of:

• If you want to stick to a markdown-like syntax, I suspect a custom component is the best solution.
• Custom HTML with inline styles should also be fine.
• The formula component also allows writing Tex which can idiomatically express such formatting needs, though the component itself is optimized for formulas so I am curious how it would look like when used for this purpose ;-)

[TysonMN]

Using markdown table is a good suggestion.

Is there an easy way to remove the boarder?

[loreanvictor]

Yes. You would need a style override like this:

<style>{` table, tr, td { border: none } `}</style>

to .codedoc/content/index.tsx in the <Page/> component before {content}.

[TysonMN]

Ah, great. By lots of trial and error, the actual code is

<style>{` table th { border: none } `}</style>

(i.e. a th inside a table...not just either independently).

Now that I have a solution that looks perfect, I would like to improve the implementation. Although it is not a problem right now, I would prefer not to set such global styles. The typical workaround for this is to also add a class.

Suppose I change the style to

<style>{` .fake-caption table th { border: none } `}</style>

Does the CODEDOC markdown parser allow markdown inside HTML?

It would be useful if I could write something like

> :Center
>
> <div class="fake-caption">
> | ![left-image][1] | &emsp;&emsp; | ![right-image][2] |
> | :--------------: | ------------ | :---------------: |
> | C# output        |              | F# output         |
> <div>

[1]: https://tysonwilliams.coding.blog/src/assets/images/cancellation_wait_wait_canceled.gif
[2]: https://tysonwilliams.coding.blog/src/assets/images/cancellation_wait_canceled_wait.gif

That particular example doesn't work. The markdown inside the div is not parsed as such.

[loreanvictor]

Does the CODEDOC markdown parser allow markdown inside HTML?

Unfortunately not. To be clear, I would love it if this was possible, as it would also allow use of custom components with HTML-like syntax, which I guess also brings a lot of pros of MDX to CODEDOC markdown. But I suspect it won't be a technically easily thing to achieve (since MDX itself does not support this as well).

I would prefer not to set such global styles. The typical workaround for this is to also add a class.

This has a quick solution and is such a neat idea. The custom component itself should be fairly straight forward, but I feel this is extremely useful so I would love to add it to default set of custom components. I suspect it would look something like this:

> :Stylized class=x
>
> **Hellow** world! (or any markdown)

> :Stylized css="color: red"
>
> **Hellow** world! (or any markdown)

[loreanvictor]

p.s. @TysonMN since I am super super busy right now (as you could say by the fact that semantic asset grouping is not released yet, much to my embarrassment), and since you have already done pretty neat custom components for your blog, I would love to use this opportunity to encourage you to add this to CODEDOC default components with a PR ;-)

[TysonMN]

Oh, another great idea!

Sure, I do think I can contribute this Stylized custom component. I am also a bit busy in the short term, so I won't do this right away. But it will be good for you to have me do this so that you focus on other problems when you have the time.