Bookstack: Markdown-Callouts with keyword

Created on 17 Jul 2018  路  4Comments  路  Source: BookStackApp/BookStack

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.

Open to discussion Enhancement

Most helpful comment

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

All 4 comments

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

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

@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

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

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.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

marcvef picture marcvef  路  3Comments

ensemblebd picture ensemblebd  路  3Comments

stuartajd picture stuartajd  路  4Comments

Legoracers picture Legoracers  路  3Comments

tpetrauskas picture tpetrauskas  路  4Comments