Welcome to Codidact Meta!
Codidact Meta is the meta-discussion site for the Codidact community network and the Codidact software. Whether you have bug reports or feature requests, support questions or rule discussions that touch the whole network – this is the site for you.
Trying to use Markdown formatting on detail-section labels causes unexpected centered alignment in preview
I knew that blank lines are needed in certain places when mixing HTML markup with Markdown so that the Markdown will actually be processed. For example:
<details>
<summary>
Gory details that are *incredibly* shocking
</summary>
Ha, fooled you!
</details>
produces:
Gory details that are *incredibly* shocking
Ha, fooled you!
A blank line is needed after the summary tag. However, adding that introduces a new problem:
<details>
<summary>
Gory details that are *incredibly* shocking
</summary>
Ha, fooled you!
</details>
This looks correct here:
Gory details that are incredibly shocking
Ha, fooled you!
But in the post preview, the label is centered (image for reference):
Update: it appears that the centering applies to the completed post as well, in some cases. For example, if ## markup for <h2> tags is used.
1 answer
There are sometimes unfortunate differences in the preview and final rendering, due to having to use different libraries for client-side and server-side rendering. I don't know if there's anything we can do about this oddity.
In the other post you linked, the problem is caused by the markdown heading being adjacent to the HTML tagging, without the blank line between them that (as you noted) is needed. Wrapping a heading in a <summary> tag seems unusual to me. This feels like an uncommon case that we'll probably have to live with.
0 comment threads
0 comment threads