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 1y ago by Monica Cellio‭

Question bug markdown html editor-preview

#5: Post edited by

Karl Knechtel‭ · 2023-08-09T15:02:50Z (over 1 year ago)

Copy Link

Raw

Markdown

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

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.

Copy Link

Raw

Markdown

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

Moshi‭ · 2023-08-07T03:26:50Z (over 1 year ago)

Copy Link

Raw

Markdown

bug markdown html

bug markdown html editor-preview

#2: Post edited by

Karl Knechtel‭ · 2023-08-07T02:46:09Z (over 1 year ago)
Looks like this only happens in the preview.

Copy Link

Raw

Markdown

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

Karl Knechtel‭ · 2023-08-07T02:43:30Z (over 1 year ago)

Copy Link

Raw

Markdown

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>

bug markdown html

Communities

Post History