Extension for bootstrap alert #152

New Issue

claunia · 2026-01-29T14:28:58Z

claunia commented

2026-01-29 14:28:58 +00:00

Originally created by @stanac on GitHub (Nov 7, 2017).

Is it possible to extend bootstrap extension to support alerts?

Currently if we want to add alert in a document, we need to write html div tag with appropriate class.

It would be nice to have something like

~~~danger
This is a danger warning
~~~

this converted to this

<div class="alert alert-danger">This is a danger warning.</div>

Syntax can be different, I am not too familiar with markdown specification, so I am not sure if this approach would be ok or not.

Originally created by @stanac on GitHub (Nov 7, 2017). Is it possible to extend bootstrap extension to support alerts? Currently if we want to add alert in a document, we need to write html div tag with appropriate class. It would be nice to have something like ``` ~~~danger This is a danger warning ~~~ ``` this converted to this ``` <div class="alert alert-danger">This is a danger warning.</div> ``` Syntax can be different, I am not too familiar with markdown specification, so I am not sure if this approach would be ok or not.

claunia added the enhancement PR Welcome! labels 2026-01-29 14:28:58 +00:00

claunia closed this issue

2026-01-29 14:28:58 +00:00

claunia commented

2026-01-29 14:28:58 +00:00

@xoofx commented on GitHub (Nov 7, 2017):

Yes, I guess it should be feasible.

@xoofx commented on GitHub (Nov 7, 2017): Yes, I guess it should be feasible.

claunia commented

2026-01-29 14:28:59 +00:00

@xoofx commented on GitHub (Nov 7, 2017):

It would likely use the existing custom container extension

:::danger
This is a danger warning
:::

@xoofx commented on GitHub (Nov 7, 2017): It would likely use the existing [custom container extension](https://github.com/lunet-io/markdig/blob/master/src/Markdig.Tests/Specs/CustomContainerSpecs.md) ``` :::danger This is a danger warning ::: ```

claunia commented

2026-01-29 14:29:00 +00:00

@stanac commented on GitHub (Nov 7, 2017):

That looks interesting, I will check if it can be used out of the box, and if not how much effort would it be to implement it.

@stanac commented on GitHub (Nov 7, 2017): That looks interesting, I will check if it can be used out of the box, and if not how much effort would it be to implement it.

claunia commented

2026-01-29 14:29:00 +00:00

@xoofx commented on GitHub (Nov 7, 2017):

Not sure it will work out of the box (until css supports alias like danger => alert alert-danger)
Otherwise it should be a very small change to the bootstrap extension to process CustomContainerBlock and change the class according to bootstrap classes

@xoofx commented on GitHub (Nov 7, 2017): Not sure it will work out of the box (until css supports alias like `danger` => `alert alert-danger`) Otherwise it should be a very small change to the bootstrap extension to process CustomContainerBlock and change the class according to bootstrap classes

claunia commented

2026-01-29 14:29:01 +00:00

@stanac commented on GitHub (Nov 7, 2017):

I was thinking about more generic solution. Instead of creating CSS alias danger => alert alert-danger, maybe it would be better to add support for multiple CSS classes, e.g.
This source:

:::alert.alert-danger.another-css-class
This is a danger warning
:::

would translate to:

<div class="alert alert-danger another-css-class">This is a danger warning</div>

@xoofx please let me know if you find this feature to be acceptable?

@stanac commented on GitHub (Nov 7, 2017): I was thinking about more generic solution. Instead of creating CSS alias `danger` => `alert alert-danger`, maybe it would be better to add support for multiple CSS classes, e.g. This source: ``` :::alert.alert-danger.another-css-class This is a danger warning ::: ``` would translate to: ``` <div class="alert alert-danger another-css-class">This is a danger warning</div> ``` @xoofx please let me know if you find this feature to be acceptable?

claunia commented

2026-01-29 14:29:02 +00:00

@cyotek commented on GitHub (Apr 14, 2018):

@stanac I was just searching for similar functionality and I came across this issue, but also this cheatsheet. The example given in the cheatsheet was

:::{.alert .alert-info}
This is a Bootstrap alert.
:::

I tested this in some of my own content and it appears to be working absolutely fine with base Markdig and no third party extensions. The braces appear to be the key as when I originally tried using custom containers the content after the space was lost.

Clearly it's not quite as friendly as a simple "danger" label, but it does seem to get the job done - not sure if that's of any help to you or not.

@cyotek commented on GitHub (Apr 14, 2018): @stanac I was just searching for similar functionality and I came across this issue, but also [this cheatsheet](http://www.digitaltapestry.net/posts/markdig-cheat-sheet). The example given in the cheatsheet was ``` :::{.alert .alert-info} This is a Bootstrap alert. ::: ``` I tested this in some of my own content and it appears to be working absolutely fine with base Markdig and no third party extensions. The braces appear to be the key as when I originally tried using custom containers the content after the space was lost. Clearly it's not quite as friendly as a simple "danger" label, but it does seem to get the job done - not sure if that's of any help to you or not.

claunia commented

2026-01-29 14:29:06 +00:00

@stanac commented on GitHub (Apr 15, 2018):

@cyotek thanks for the find. I've bookmarked the cheatsheet. It's a generic solution I was looking for, so I'm closing the issue (@xoofx please reopen it if you disagree). @xoofx it would be nice to have a cheatsheet (this one or another similar) linked in the readme.

@stanac commented on GitHub (Apr 15, 2018): @cyotek thanks for the find. I've bookmarked the cheatsheet. It's a generic solution I was looking for, so I'm closing the issue (@xoofx please reopen it if you disagree). @xoofx it would be nice to have a cheatsheet (this one or another similar) linked in the readme.

claunia referenced this issue

2026-01-29 14:46:16 +00:00

[PR #152] [CLOSED] Normalize Bugfixes and extension of Unit Tests #837

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/markdig#152