Markdown-Callouts with keyword

[david-jointech]

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.

[udoewich]

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).

[derek-shnosh]

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]

@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.

[james-geiger]

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.

[caius-martinus]

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).

[namxam]

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

[ssddanbrown]

@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.

[msharp1]

hi @ssddanbrown ,

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