Markdown Cheatsheet

Layout

::: {layout-ncol=2}
::: {layout-nrow=2}
::: {layout="[[1,1], [1]]"}
::: {layout="[[70,30], [100]]"}
::: {layout="[[40,-20,40], [100]]"}  # use negative values to create space between elements
::: {layout="[15,-2,10]" layout-valign="bottom"}

Color

{.text-primary}
{.text-secondary}
{.text-success}
{.text-danger}
{.text-warning}
{.text-info}
{.text-muted}

[red]{style="color:green;"}

Text

{.fs-1} {.fs-6}  # font size
{.fw-bold} {.fst-italic}  # weight & italics
{.text-decoration-underline}
{.text-decoration-line-through}

Table

{.striped}
{.light}

Popover

REF

Alert

A simple primary alert—check it out!

A simple primary alert—check it out!

A simple primary alert—check it out!

A simple primary alert—check it out!

A simple primary alert—check it out!

Other

This content can be styled with a border

This content can be styled with a border

This content can be styled with a border

Take the quiz!

<div class="border">
  <p>This content can be styled with a border</p>
</div>

Here is a warning.

More content.

Table with tooltips

include-before-body:
  text: |
    <script>
      document.addEventListener("DOMContentLoaded", function(){
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
          return new bootstrap.Tooltip(tooltipTriggerEl);
        });
      });
    </script>

import pandas as pd
from IPython.display import HTML

# this is a trick
#| html-table-processing: none

# Example DataFrame
data = {
    'A': ['Item 1', 'Item 2', 'Item 3'],
    'B': ['Tooltip 1', 'Tooltip 2', 'Tooltip 3'],
}
df = pd.DataFrame(data)

data = {
    'Item': [f'Item {i}' for i in range(1, 21)],
    'Item2': [f'Item {i}' for i in range(1, 21)],
    'Item3': [f'Item {i}' for i in range(1, 21)],
    'Item4': [f'Item {i}' for i in range(1, 21)],
    'Description': [f'Description for Item {i}' for i in range(1, 21)],
    'Tooltip': [f'Tooltip information for<br> Item {i}' for i in range(1, 21)]
}
df = pd.DataFrame(data)

# Use Styler to add tooltip spans directly into cell values
def add_tooltip(value, tooltip):
    return f'<span data-bs-toggle="tooltip" data-bs-html="true" data-bs-title="{tooltip}">{value}</span>'

# Assuming you want to add tooltips from 'B' to 'A'
df['Item'] = df.apply(lambda row: add_tooltip(row['Item'], row['Tooltip']), axis=1)
df['Item2'] = df.apply(lambda row: add_tooltip(row['Item2'], row['Tooltip']), axis=1)

# Now convert to HTML
html_with_tooltips = df.drop(columns=["Tooltip"]).style.set_table_attributes('class="table-striped table-success"').to_html()
# html_with_tooltips = df.drop(columns=['B']).style.to_html()
HTML(html_with_tooltips)

	Item	Item2	Item3	Item4	Description
0	Item 1	Item 1	Item 1	Item 1	Description for Item 1
1	Item 2	Item 2	Item 2	Item 2	Description for Item 2
2	Item 3	Item 3	Item 3	Item 3	Description for Item 3
3	Item 4	Item 4	Item 4	Item 4	Description for Item 4
4	Item 5	Item 5	Item 5	Item 5	Description for Item 5
5	Item 6	Item 6	Item 6	Item 6	Description for Item 6
6	Item 7	Item 7	Item 7	Item 7	Description for Item 7
7	Item 8	Item 8	Item 8	Item 8	Description for Item 8
8	Item 9	Item 9	Item 9	Item 9	Description for Item 9
9	Item 10	Item 10	Item 10	Item 10	Description for Item 10
10	Item 11	Item 11	Item 11	Item 11	Description for Item 11
11	Item 12	Item 12	Item 12	Item 12	Description for Item 12
12	Item 13	Item 13	Item 13	Item 13	Description for Item 13
13	Item 14	Item 14	Item 14	Item 14	Description for Item 14
14	Item 15	Item 15	Item 15	Item 15	Description for Item 15
15	Item 16	Item 16	Item 16	Item 16	Description for Item 16
16	Item 17	Item 17	Item 17	Item 17	Description for Item 17
17	Item 18	Item 18	Item 18	Item 18	Description for Item 18
18	Item 19	Item 19	Item 19	Item 19	Description for Item 19
19	Item 20	Item 20	Item 20	Item 20	Description for Item 20

data = {
    'Column A': [f'<span style="float: left;">Left</span><span style="float: right;">Right</span><br><span style="float: right;">Right</span>', 'Another Entry']
}
df = pd.DataFrame(data)
HTML(df.to_html(escape=False))

	Column A
0	LeftRight Right
1	Another Entry