Skip to content
New issue

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

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

Already on GitHub? Sign in 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. 🙂

Sign up for free to join this conversation on GitHub. Already have an account? Sign in 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