ubuntu / documents

Using Raw Cells

Getting Your Presentation Just Right

Jupyter allows you to use raw cells where the content gets rendered without modification. Falsifiable complies. For example, if you created a raw cell with the content,

<table>
<tr><th>Header 1</th><th>Header 2</th></tr>
<tr><td>Cell 1</td><td>Cell 2</td></tr>
</table>

falsifiable emits,

Header 1Header 2
Header 1Header 2

For some cases, this works well. Hand-crafting some HTML to get the presentation you want may be much faster than writing a generator. However, there are limitations. For the sake of security, user-generated content (UGC) is sanitized at the conclusion of rendering. So, for example, if you wrote,

<a href="javascript:alert('computer infected')" onmouseover="alert('send bitcoin')">
    Innocuous link
<a>

it is rendered as,

Innocuous link

with the href and onmouseover stripped. This protects users from a variety of attacks. The downside is it takes one large tool out of your toolbelt: CSS. For example, if you wrote,

<p style="font-size:100px">big text</p>

it is rendered as,

big text

For the most part, other tags like <style>, <script>, <iframe>, and <object> are stripped completely. However, there are a few critical exceptions. For example, you can copy the youtube embed code for Carl Sagan’s Pale Blue dot,

<iframe 
        width="560" height="315" 
        src="https://www.youtube.com/embed/wupToqz1e2g" 
        frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen>
</iframe>

it renders as expected (with a few properties stripped).

Another importantThe ExTrEmElY OnLiNe life is the one for me. exception is embedded tweets. If you copy and paste the embed code as specified by twitter,

<blockquote class="twitter-tweet">
    <p lang="en" dir="ltr">
        Procrastination is problem solving.<br><br>
        ...it just doesn&#39;t solve the problem which needs solving. 
        <a href="https://t.co/CWkJt8ZGCd">pic.twitter.com/CWkJt8ZGCd</a>
    </p>&mdash; (wannabe) Ƀreaker of (the Bad) Loops (@generativist) 
    <a href="https://twitter.com/generativist/status/767331531522211840?ref_src=twsrc%5Etfw">
        August 21, 2016
    </a>
</blockquote> 

it renders as expected,

There are a few other exceptions I’ll document in the future. But for now, this covers 90% of the use cases.