representing constants

there are python constants that have most natural respresentations use the data s tag.

<data value="true">True</data>,
<data value="false">False</data>,
<data value>None</data>,
<style>
data[value] {
    /**recapture the style used in the code editor for the constants.**/
    font-family: monospace;
    color: var(--jp-mirror-editor-keyword-color, green);
    font-weight: bold;
}
</style>

True , False , None ,

representing strings

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/samp

<samp itemscope itemtype="https://docs.python.org/3/library/functions.html#str">a string representation makes sense as a samp</samp>
<br/>
<samp itemscope itemtype="https://docs.python.org/3/library/functions.html#str" style="--nb-quote-style: var(--nb-single-quote);">a single quoted string</samp>

<style>
:root {
    /**its hard to write quotes inside of html tags so it helps to have constants to use.**/
    --nb-single-quote: "'";
    --nb-double-quote: "\"";
    --nb-quote-style: var(--nb-double-quote);
}
samp[itemtype$="str"] {
    &::before, &::after {content: var(--nb-quote-style);}
}
</style>

a string representation makes sense as a samp
a single quoted string

representing numbers

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/samp

<samp itemscope itemtype="https://docs.python.org/3/library/functions.html#int">42</samp>
<br/>
<samp itemscope itemtype="https://docs.python.org/3/library/functions.html#float">3.141596</samp>

42
3.141596

representing lists

<ol itemscope itemtype="https://docs.python.org/3/library/functions.html#list">
    <li>1</li><li>2</li><li>3</li>
</ol>
<style>
ol[itemtype$="#list"] {
    font-family: mono-space;
    li {
        display: inline-block;
        &:not(:last-child)::after {content: ",";}
    }
    list-style: none;
    &::before {content: "[";}
    &::after {content: "]";}
}
</style>

1. 1
2. 2
3. 3

representing tuples

in this example we introduce the itemscope and itemtype properties to describe the types of the output. the outcome is the ability to tailor styling based on specific python types. lists and tuples are both ordered lists and the itemtype attributes provide a way to disambiguate the ordered lists from each other.

tuples also have ordered list semantics, but their visual representation differs in the enclosing characters.1

<ol itemscope itemtype="https://docs.python.org/3/library/functions.html#tuple">
    <li>1</li><li>2</li><li>3</li>
</ol>
<style>
ol[itemtype$="#tuple"] {
    list-style: none;
    font-family: mono-space;
    li {
        display: inline-block;
        &:not(:last-child)::after {content: ", ";}
    }
    &::before {content: "(";}
    &::after {content: ")";}
}
</style>

1. 1
2. 2
3. 3

representing sets

sets different from lists and tuples because they are unordered. they use braces to wrap the output instead.

<ul itemscope itemtype="https://docs.python.org/3/library/functions.html#set">
    <li>30</li><li>3</li>
</ul>
<style>
ul[itemtype$="#set"] {
    font-family: mono-space;
    list-style: none;
    li {
        display: inline;
        &:not(:last-child)::after {content: ", ";}
    }
    &::before {content: "{";}
    &::after {content: "}";}
}
</style>

• 30
• 3

representing dictionaries

definition lists are from capturing the structure python dictionaries.

<dl itemscope itemtype="https://docs.python.org/3/library/functions.html#dict">
    <dt>foo</dt><dd>1</dd>
    <dt>bar</dt><dd>2</dd>
    <dt>baz</dt><dd>3</dd>
</dl>
<style>
dl[itemtype$="#dict"] {
    display: inline;
    dd, dt {
        display: inline;
        float: unset; /** disable weird jupyter float thing**/
    } 
    dt {&::after {content: ": ";}}
    dd {&:not(:last-child)::after {content: ",";}}
    &::before {content: "{";}
    &::after {content: "}";}
}
</style>

foo

1

bar

2

baz

3