Colored note boxes inside Jupyter notebooks

divtags.rst

############# Markdown parser in Jupyter notebooks ##################

<div class="alert alert-block alert-info"> <b>NOTE</b> Use blue boxes for Tips and notes. </div>

<div class="alert alert-block alert-success"> Use green boxes sparingly, and only for some specific purpose that the other boxes can't cover. For example, if you have a lot of related content to link to, maybe you decide to use green boxes for related links from each section of a notebook. </div>

<div class="alert alert-block alert-warning"> Use yellow boxes for examples that are not inside code cells, or use for mathematical formulas if needed. </div>

<div class="alert alert-block alert-danger"> In general, just avoid the red boxes. </div>

############# Markdown parser in Sphinx ##################

<div class="admonition note"> <p class="admonition-title">Note</p> <p>You should note that the title will be automatically capitalized.</p> </div>

<div class="admonition danger"> <p class="admonition-title">Don't try this at home</p> <p>...</p> </div>

<div class="admonition important"> <p>This is an admonition box without a title.</p> </div>

Alert Box Usage Guidelines

Note Boxes 📝

NOTE: Use blue boxes for tips and notes.

Use Case: Blue boxes are ideal for highlighting important tips or additional notes that might help users understand or utilize the content better. For example, use them to offer extra guidance or clarify common questions.

<div class="alert alert-block alert-info"> 
<b>NOTE</b> Use blue boxes for Tips and notes. 
</div>

Success Boxes 🎯

SUCCESS: Use green boxes sparingly, and only for some specific purpose that the other boxes can't cover. For example, if you have a lot of related content to link to, you might decide to use green boxes for related links from each section of a notebook.

Use Case: Green boxes are best used when you need to draw attention to related content or provide useful links that are not covered by other box types. Use them to group and highlight relevant resources or related sections.

<div class="alert alert-block alert-success"> 
 some specific purpose , like links
</div>

Warning Boxes ⚠️

WARNING: Use yellow boxes for examples that are not inside code cells, or for mathematical formulas if needed.

Use Case: Yellow boxes should be used to present examples that are important for understanding the content but are not part of code cells. They can also be useful for displaying mathematical formulas or additional explanations that need to stand out.

<div class="alert alert-block alert-warning"> 
 code cells, or use for mathematical formulas if needed.
 </div>

Danger Boxes 💀

DANGER: In general, just avoid the red boxes.

Use Case: Red boxes are typically used for critical warnings or errors, but they should be avoided unless absolutely necessary. Their strong visual impact can be distracting, so reserve them for situations where immediate attention is required.

<div class="alert alert-block alert-danger">
AVOID
</div>