Markdown-Callouts with keyword #749

New Issue

OVERLORD · 2026-02-04T22:09:22+03:00

OVERLORD commented

2026-02-04 22:09:22 +03:00

Originally created by @david-jointech on GitHub (Jul 17, 2018).

Desired Feature:

I am testing BookStack for a setup where we heavily use https://github.com/hackmdio/codimd for collaborative editing. Bookstack should then make those documents "persisted" and better organized.

CodiMD uses Github-style markdown, so there are currently some differences.

One of that are the callouts. As mentioned in #469 you are able to add callouts in Markdown via <p class="callout info">A success message</p> (or the same with div's). In CodiMD the same thing is achieved with: :::info A success message :::.

I'd love to be able to use callouts with that :::info-syntax instead of the HTML-Tags. I'd suggest making :::info Message ::: behaving exactly as <div class="callout info">Mesage</div> because we also use multi-line callouts where the <p>-Tag would fail.

Originally created by @david-jointech on GitHub (Jul 17, 2018). Desired Feature: I am testing BookStack for a setup where we heavily use https://github.com/hackmdio/codimd for collaborative editing. Bookstack should then make those documents "persisted" and better organized. CodiMD uses Github-style markdown, so there are currently some differences. One of that are the callouts. As mentioned in #469 you are able to add callouts in Markdown via `<p class="callout info">A success message</p>` (or the same with div's). In CodiMD the same thing is achieved with: `:::info A success message :::`. I'd love to be able to use callouts with that `:::info`-syntax instead of the HTML-Tags. I'd suggest making `:::info Message :::` behaving exactly as `<div class="callout info">Mesage</div>` because we also use multi-line callouts where the `<p>`-Tag would fail.

OVERLORD added the 🛠️ Enhancement ☕ Open to discussion labels 2026-02-04 22:09:22 +03:00

OVERLORD commented

2026-02-04 22:09:31 +03:00

@udoewich commented on GitHub (Aug 21, 2018):

I second this, especially since markdown does not seem to work inside a block wrapped with the HTML tags (at least it failed when I tried to use bold inside an info callout).

@udoewich commented on GitHub (Aug 21, 2018): I second this, especially since markdown does not seem to work inside a block wrapped with the HTML tags (at least it failed when I tried to use **bold** inside an info callout).

OVERLORD commented

2026-02-04 22:09:36 +03:00

@derek-shnosh commented on GitHub (Aug 21, 2018):

I'm experiencing the same @udoewich, I want a link inside a callout and currently cannot. This would be a great feature.

<p class="callout info">Installed via [Ninite](https://ninite.com)</p>

Results in;

@derek-shnosh commented on GitHub (Aug 21, 2018): I'm experiencing the same @udoewich, I want a link inside a callout and currently cannot. This would be a great feature. `<p class="callout info">Installed via [Ninite](https://ninite.com)</p>` Results in; ![image](https://user-images.githubusercontent.com/21090563/44424107-ec8bb600-a53c-11e8-8712-3c05617d9404.png)

OVERLORD commented

2026-02-04 22:09:38 +03:00

@derek-shnosh commented on GitHub (Aug 28, 2018):

@udoewich I found a temporary workaround of sorts for putting links inside callouts; put an arbitrary html tag before the callout. I used <c> in the example below.

e.g.

<c><p class="callout info">Installed via [Ninite](https://ninite.com), updater in `c:\tools\misc\ninite.exe`</p></html>

Produces

Of course using MD style tags/syntax is preferred, but this will get me by until that is implemented.

@derek-shnosh commented on GitHub (Aug 28, 2018): @udoewich I found a temporary _workaround_ of sorts for putting links inside callouts; put an arbitrary html tag before the callout. I used `<c>` in the example below. e.g. ``` <c><p class="callout info">Installed via [Ninite](https://ninite.com), updater in `c:\tools\misc\ninite.exe`</p></html> ``` Produces ![image](https://user-images.githubusercontent.com/21090563/44736721-c74ef880-aaa4-11e8-91f0-79542876cd21.png) Of course using MD style tags/syntax is preferred, but this will get me by until that is implemented.

OVERLORD commented

2026-02-04 22:09:45 +03:00

@james-geiger commented on GitHub (Sep 18, 2019):

I have this working on my local instance with the markdown-it-container package using a similar syntax in the original post

::: callout info
My callout content
:::

The package uses <div> tags instead of the <p> tags that the WYSIWYG editor defaults to, so it produces from the above syntax:

<div class="callout info>
     <p>My callout content</p>
</div>

Not sure if this is something that would need to be considered for alignment. So far I've had to adjust the callout classes to drop the bottom margin from the paragraph tag and add it back to the div. This package seems to be the best option within the markdown-it universe.

@ssddanbrown I'd be happy to submit a PR. Similar functions are available using the Toast UI editor, which I know has been floated as a possible solution to align the two editors. Depending on where that sits in the roadmap, it might also be good to review how that might work in the future.

@james-geiger commented on GitHub (Sep 18, 2019): I have this working on my local instance with the markdown-it-container package using a similar syntax in the original post ``` ::: callout info My callout content ::: ``` The package uses `<div>` tags instead of the `<p>` tags that the WYSIWYG editor defaults to, so it produces from the above syntax: ``` <div class="callout info> <p>My callout content</p> </div> ``` Not sure if this is something that would need to be considered for alignment. So far I've had to adjust the callout classes to drop the bottom margin from the paragraph tag and add it back to the div. This package seems to be the best option within the markdown-it universe. @ssddanbrown I'd be happy to submit a PR. Similar functions are available using the Toast UI editor, which I know has been floated as a possible solution to align the two editors. Depending on where that sits in the roadmap, it might also be good to review how that might work in the future.

OVERLORD commented

2026-02-04 22:09:51 +03:00

@caius-martinus commented on GitHub (May 24, 2023):

About the same feedback on my side. This would be great to be able to put links as markdown in callouts (or bullet lists, etc).

@caius-martinus commented on GitHub (May 24, 2023): About the same feedback on my side. This would be great to be able to put links as markdown in callouts (or bullet lists, etc).

OVERLORD commented

2026-02-04 22:09:56 +03:00

@namxam commented on GitHub (Dec 4, 2023):

Hi there, github implemented a different syntax for adding alerts / callouts in markdown. Would it be feasable to support the same syntax?

https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts

@namxam commented on GitHub (Dec 4, 2023): Hi there, github implemented a different syntax for adding alerts / callouts in markdown. Would it be feasable to support the same syntax? https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts

OVERLORD commented

2026-02-04 22:10:00 +03:00

@ssddanbrown commented on GitHub (Dec 4, 2023):

@namxam I generally try to not stray outside of commonmark, so we have a (non-platform specific) standard to work to.
So I wouldn't want to follow this unless it became part of commonmark.

Just a few other things based upon reading the above:

You can use Ctrl+9 to insert a callout in the Markdown editor without having to type out or copy the HTML. I think you can tap 9 while holding control still to cycle through the callout types.
I think markdown in the callouts is supported, but you'd need blank lines between opening/closing HTML tags, and the content. From what I remember, that's due to requirements of commonmark parsing.

@ssddanbrown commented on GitHub (Dec 4, 2023): @namxam I generally try to not stray outside of commonmark, so we have a (non-platform specific) standard to work to. So I wouldn't want to follow this unless it became part of commonmark. Just a few other things based upon reading the above: - You can use Ctrl+9 to insert a callout in the Markdown editor without having to type out or copy the HTML. I think you can tap `9` while holding control still to cycle through the callout types. - I think markdown in the callouts is supported, but you'd need blank lines between opening/closing HTML tags, and the content. From what I remember, that's due to requirements of commonmark parsing.

OVERLORD commented

2026-02-04 22:10:04 +03:00

@msharp1 commented on GitHub (Dec 5, 2023):

hi @ssddanbrown ,

Those two tips are extremely useful (thanks!) however I didn't see them in the documentation section.

@msharp1 commented on GitHub (Dec 5, 2023): hi @ssddanbrown , Those two tips are extremely useful (thanks!) however I didn't see them in the [documentation section](https://www.bookstackapp.com/docs/user/markdown-editor/).

OVERLORD commented

2026-02-04 22:10:07 +03:00

@rjhornsby commented on GitHub (Jan 28, 2026):

Have started using Bookstack (25.12.1) recently, so please forgive my ignorance. I'm porting some documentation from Github into bookstack and have some of these type of callouts which I'd like to preserve the general rendered formatting. I'm using the bookstack MD editor, but ctrl-9 doesn't seem to have any effect.

For anyone else looking to port these styles into bookstack: the styles mentioned in #469 do work, and as noted they can be written directly into the markdown. However, inside these blocks you no longer get markdown so things like these words (surrounded by tick marks) won't be monospaced like you expect, but rather rendered literally.

Setting aside adding any CSS, for non-block preformatting, use <code> ... </code> instead. If you want a preformatted block using <pre> then do it outside the <p> or the renderer gets confused and it's messy.

Use the 4 variants shown in #469. The other GH styles (note, tip, important, and caution) don't appear to have corresponding CSS classes and so won't work. They'll make the content render weird in darkmode.

@rjhornsby commented on GitHub (Jan 28, 2026): Have started using Bookstack (25.12.1) recently, so please forgive my ignorance. I'm porting some documentation from Github into bookstack and have some of these type of callouts which I'd like to preserve the general rendered formatting. I'm using the bookstack MD editor, but ctrl-9 doesn't seem to have any effect. For anyone else looking to port these styles into bookstack: the styles mentioned in #469 do work, and as noted they can be written directly into the markdown. However, inside these blocks you no longer get markdown so things like `these words` (surrounded by tick marks) won't be monospaced like you expect, but rather rendered literally. Setting aside adding any CSS, for non-block preformatting, use `<code> ... </code>` instead. If you want a preformatted block using `<pre>` then do it outside the `<p>` or the renderer gets confused and it's messy. Use the 4 variants shown in #469. The other GH styles (`note`, `tip`, `important`, and `caution`) don't appear to have corresponding CSS classes and so won't work. They'll make the content render weird in darkmode.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#749