Communities

Writing
Writing
Codidact Meta
Codidact Meta
The Great Outdoors
The Great Outdoors
Photography & Video
Photography & Video
Scientific Speculation
Scientific Speculation
Cooking
Cooking
Electrical Engineering
Electrical Engineering
Judaism
Judaism
Languages & Linguistics
Languages & Linguistics
Software Development
Software Development
Mathematics
Mathematics
Christianity
Christianity
Code Golf
Code Golf
Music
Music
Physics
Physics
Linux Systems
Linux Systems
Power Users
Power Users
Tabletop RPGs
Tabletop RPGs
Community Proposals
Community Proposals
tag:snake search within a tag
answers:0 unanswered questions
user:xxxx search by author id
score:0.5 posts with 0.5+ score
"snake oil" exact phrase
votes:4 posts with 4+ votes
created:<1w created < 1 week ago
post_type:xxxx type of post
Search help
Notifications
Mark all as read See all your notifications »
Q&A

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.

Post History

77%
+5 −0
Q&A 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 deta...

1 answer  ·  posted 1y ago by Karl Knechtel‭  ·  last activity 12mo ago by Monica Cellio‭

#5: Post edited by user avatar Karl Knechtel‭ · 2023-08-09T15:02:50Z (over 1 year ago)
  • 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:
  • <details>
  • <summary>
  • Gory details that are *incredibly* shocking
  • </summary>
  • Ha, fooled you!
  • </details>
  • 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:
  • <details>
  • <summary>
  • Gory details that are *incredibly* shocking
  • </summary>
  • Ha, fooled you!
  • </details>
  • But in the post preview, the label is centered (image for reference):
  • >![Screencap from my post preview](https://meta.codidact.com/uploads/0mwxs7vmrbp2xkicb34j29kyixkd)
  • 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:
  • <details>
  • <summary>
  • Gory details that are *incredibly* shocking
  • </summary>
  • Ha, fooled you!
  • </details>
  • 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:
  • <details>
  • <summary>
  • Gory details that are *incredibly* shocking
  • </summary>
  • Ha, fooled you!
  • </details>
  • But in the post preview, the label is centered (image for reference):
  • >![Screencap from my post preview](https://meta.codidact.com/uploads/0mwxs7vmrbp2xkicb34j29kyixkd)
  • ----
  • 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](https://meta.codidact.com/posts/289288/289314#answer-289314).
#4: Post edited by user avatar Lorenzo Donati‭ · 2023-08-07T20:09:57Z (over 1 year ago)
Using blockquote around the image makes the post less confusing. As it stands, it's difficult to tell the image content from UI elements.
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:
  • <details>
  • <summary>
  • Gory details that are *incredibly* shocking
  • </summary>
  • Ha, fooled you!
  • </details>
  • 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:
  • <details>
  • <summary>
  • Gory details that are *incredibly* shocking
  • </summary>
  • Ha, fooled you!
  • </details>
  • But in the post preview, the label is centered (image for reference):
  • ![Screencap from my post preview](https://meta.codidact.com/uploads/0mwxs7vmrbp2xkicb34j29kyixkd)
  • 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:
  • <details>
  • <summary>
  • Gory details that are *incredibly* shocking
  • </summary>
  • Ha, fooled you!
  • </details>
  • 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:
  • <details>
  • <summary>
  • Gory details that are *incredibly* shocking
  • </summary>
  • Ha, fooled you!
  • </details>
  • But in the post preview, the label is centered (image for reference):
  • >![Screencap from my post preview](https://meta.codidact.com/uploads/0mwxs7vmrbp2xkicb34j29kyixkd)
#3: Post edited by user avatar Moshi‭ · 2023-08-07T03:26:50Z (over 1 year ago)
#2: Post edited by user avatar Karl Knechtel‭ · 2023-08-07T02:46:09Z (over 1 year ago)
Looks like this only happens in the preview.
  • Trying to use Markdown formatting on detail-section labels causes unexpected centered alignment
  • 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:
  • <details>
  • <summary>
  • Gory details that are *incredibly* shocking
  • </summary>
  • Ha, fooled you!
  • </details>
  • 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>
  • ```
  • Now the label alignment spontaneously changes:
  • <details>
  • <summary>
  • Gory details that are *incredibly* shocking
  • </summary>
  • Ha, fooled you!
  • </details>
  • 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:
  • <details>
  • <summary>
  • Gory details that are *incredibly* shocking
  • </summary>
  • Ha, fooled you!
  • </details>
  • 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:
  • <details>
  • <summary>
  • Gory details that are *incredibly* shocking
  • </summary>
  • Ha, fooled you!
  • </details>
  • But in the post preview, the label is centered (image for reference):
  • ![Screencap from my post preview](https://meta.codidact.com/uploads/0mwxs7vmrbp2xkicb34j29kyixkd)
#1: Initial revision by user avatar Karl Knechtel‭ · 2023-08-07T02:43:30Z (over 1 year ago)
Trying to use Markdown formatting on detail-section labels causes unexpected centered alignment
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:
<details>
<summary>
Gory details that are *incredibly* shocking
</summary>

Ha, fooled you!
</details>

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>
```

Now the label alignment spontaneously changes:
<details>
<summary>

Gory details that are *incredibly* shocking
</summary>

Ha, fooled you!
</details>