Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Add bootstrap alert renderer #782

Merged
merged 2 commits into from
Mar 18, 2024
Merged

Add bootstrap alert renderer #782

merged 2 commits into from
Mar 18, 2024

Conversation

Abrynos
Copy link
Contributor

@Abrynos Abrynos commented Mar 15, 2024

Thank you for considering the inclusion of this merge request.

Closes #781

For testing I used the following MD:

# TODO

> [!NOTE]
> This is the newly generated NOTE block
> 
> And this is the second paragraph

> [!TIP]
> This is the newly generated TIP block
>
> And this is the second paragraph

> [!IMPORTANT]
> This is the newly generated IMPORTANT block
>
> And this is the second paragraph

> [!WARNING]
> This is the newly generated WARNING block
>
> And this is the second paragraph

> [!CAUTION]
> This is the newly generated CAUTION block
> 
> And this is the second paragraph

To produce this HTML:

<h1 id="todo">TODO</h1>
<div class="markdown-alert markdown-alert-note alert alert-primary" role="alert">
<p>This is the newly generated NOTE block</p>
<p style="margin-bottom: 0">And this is the second paragraph</p>
</div>
<div class="markdown-alert markdown-alert-tip alert alert-success" role="alert">
<p>This is the newly generated TIP block</p>
<p style="margin-bottom: 0">And this is the second paragraph</p>
</div>
<div class="markdown-alert markdown-alert-important alert alert-info" role="alert">
<p>This is the newly generated IMPORTANT block</p>
<p style="margin-bottom: 0">And this is the second paragraph</p>
</div>
<div class="markdown-alert markdown-alert-warning alert alert-warning" role="alert">
<p>This is the newly generated WARNING block</p>
<p style="margin-bottom: 0">And this is the second paragraph</p>
</div>
<div class="markdown-alert markdown-alert-caution alert alert-danger" role="alert">
<p>This is the newly generated CAUTION block</p>
<p style="margin-bottom: 0">And this is the second paragraph</p>
</div>

Which (with my HTML header and footer) looks like this:

image

@Abrynos
Copy link
Contributor Author

Abrynos commented Mar 15, 2024

Oh and of course a screenshot with the light theme of bootstrap:

image

@xoofx xoofx merged commit 391f376 into xoofx:master Mar 18, 2024
1 check passed
@xoofx
Copy link
Owner

xoofx commented Mar 18, 2024

Thanks!

@MihaZupan
Copy link
Collaborator

As a follow-up, I realize that GH allows the NOTE / TIP, etc. in any casing, not just all upper.
We might want to match that in our Alert block logic.

@Abrynos Abrynos deleted the bootstrap-alerts branch March 18, 2024 07:26
@Abrynos
Copy link
Contributor Author

Abrynos commented Mar 18, 2024

As a follow-up, I realize that GH allows the NOTE / TIP, etc. in any casing, not just all upper. We might want to match that in our Alert block logic.

Good catch! Should I make another PR, @xoofx ?

@xoofx
Copy link
Owner

xoofx commented Mar 18, 2024

As a follow-up, I realize that GH allows the NOTE / TIP, etc. in any casing, not just all upper. We might want to match that in our Alert block logic.

Good catch! Should I make another PR, @xoofx ?

Sure, go ahead. 🙂

# for free to join this conversation on GitHub. Already have an account? # to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Feature-request: Use bootstrap alerts for alert blocks
3 participants