Text & HTML

`Text` ¶

You can add short or long-form Markdown content to your app with the Text block.

Info

Markdown is a lightweight markup language that allows you to include formatted text in your app, and can be accessed through ar.Text, or by passing in a string directly.

Check here for more information on how to format your text with markdown.

Parameters:

Name	Type	Description	Default
`text`	`str \| None`	A markdown formatted text, use triple-quotes, (`"""# My Title"""`) to create multi-line markdown text	`None`
`file`	`NPath \| None`	A path to a file containing markdown text	`None`
`name`	`str \| None`	A unique name for the block to reference when adding text or embedding (optional)	`None`
`label`	`str \| None`	A label used when displaying the block (optional)	`None`

Note

File encodings are auto-detected, if this fails please read the file manually with an explicit encoding and use the text parameter on ar.Attachment

Simple Text From Markdown¶

ar.Text("__My awesome markdown__")

Multi-line Text¶

To include multi-line text and formatting the words, use triple-quoted string, e.g. """Some words"""

md = """Quas *diva coeperat usum*; suisque, ab alii, prato. Et cornua frontes puerum,
referam vocassent **umeris**. Dies nec suorum alis adstitit, *temeraria*,
anhelis aliis lacunabant quoque adhuc spissatus illum refugam perterrita in
sonus. Facturus ad montes victima fluctus undae Zancle et nulli; frigida me.
Regno memini concedant argento Aiacis terga, foribusque audit Persephone
serieque, obsidis cupidine qualibet Exadius.

```python
utf_torrent_flash = -1;
urlUpnp -= leakWebE - dslam;
skinCdLdap += sessionCyberspace;
var ascii = address - software_compile;
webFlaming(cable, pathIllegalHtml);```

## Quo exul exsecrere cuique non alti caerulaque

*Optatae o*! Quo et callida et caeleste amorem: nocet recentibus causamque.

- Voce adduntque
- Divesque quam exstinctum revulsus
- Et utrique eunti
- Vos tantum quercum fervet et nec
- Eris pennis maneas quam
"""

ar.Text(md)

Text-heavy Apps¶

If your app is text-heavy (such as an blogpost) and it contains multiple other blocks, creating a list of strings and blocks in Python can be cumbersome. To solve this, Arakawa provides a format option, which allows you to write a single block of Markdown (either in your app, or in a separate file), and intersperse it with other blocks.

To do this, use double braces to specify where you want your other blocks to appear throughout your text.

import seaborn as sns
import altair as alt

md = """
For example, if we want to visualize the number of people in each class within the interval we select a point chart between age and fare, we could do something like this.

{{plot}}

Altair allows you to create some extremely interactive plots which do on-the-fly calculations — without even requiring a running Python server!
"""

titanic = sns.load_dataset("titanic")

points = (
    alt.Chart(titanic)
    .mark_point()
    .encode(
        x="age:Q",
        color="class:N",
        y="fare:Q",
    )
    .interactive()
    .properties(width="container")
)

ar.Text(md).format(plot=points)

Text From File¶

Alternatively, you can write your article or post in your favourite markdown editor, and pass it in as a file.

ar.Text(file="./my_blogpost.md").format(plot=points)

`Code` ¶

The code block allows you to embed syntax-highlighted source code into your app.

Note

This block currently supports Python and JavaScript.

Parameters:

Name	Type	Description	Default
`code`	`str`	A source code	required
`language`	`str`	A language of the code, most common languages are supported (optional - defaults to Python)	`'python'`
`caption`	`str \| None`	A caption to display below the Code (optional)	`None`
`name`	`str \| None`	A unique name for the block to reference when adding text or embedding (optional)	`None`
`label`	`str \| None`	A label used when displaying the block (optional)	`None`

Simple Code Block¶

code = """
function foo(n) {
  return foo(n + 1)
}
"""

ar.Code(code=code, language="javascript")

`Formula` ¶

The formula block allows you easily to add LaTeX-formatted equations to your app, with an optional caption.

Tip

A brief intro into LaTeX formulas can be found here.

Parameters:

Name	Type	Description	Default
`formula`	`str`	A formula to embed, using LaTeX format (use raw strings)	required
`caption`	`str \| None`	A caption to display below the Formula (optional)	`None`
`name`	`str \| None`	A unique name for the block to reference when adding text or embedding (optional)	`None`
`label`	`str \| None`	A label used when displaying the block (optional)	`None`

Note

LaTeX commonly uses special characters, hence prefix your formulas with r to make them raw strings, e.g. r"rac{1}{\sqrt{x^2 + 1}}"

Under the hood we use MathJAX to render the equations in the browser and not a full TeX engine. This means that some of your TeX input may not be rendered correctly on our system - read the MathJAX documentation for more info.

Simple LaTeX Formula¶

ar.Formula(r"\frac{1}{\sqrt{x^2 + 1}}")

`HTML` ¶

The HTML block allows you to add raw HTML to your app, allowing for highly customized components, such as your company's brand, logo, and more.

Info

The HTML block is sandboxed and cannot execute JavaScript by default.

Parameters:

Name	Type	Description	Default
`html`	`str \| dom_tag`	An HTML fragment to embed - can be a string or a dominate tag	required
`name`	`str \| None`	A unique name for the block to reference when adding text or embedding (optional)	`None`
`label`	`str \| None`	A label used when displaying the block (optional)	`None`
`sandbox`	`str \| None`	A sandbox attribute. Defaults to "allow-scripts". "allow-scripts" is needed to resize iframe.	`'allow-scripts'`

Simple HTML Content¶

html = """
<html>
<style type="text/css">
        @keyframes example {
            0%   {color: #EEE;}
            25%  {color: #EC4899;}
            50%  {color: #8B5CF6;}
            100% {color: #EF4444;}
        }
        #container {
            background: #1F2937;
            padding: 10em;
        }
        h1 {
            color:#eee;
            animation-name: example;
            animation-duration: 4s;
            animation-iteration-count: infinite;
        }
    </style>
<div id="container">
<h1> Welcome to my App </h1>
</div>
</html>
"""

ar.HTML(html)

Text & HTML

Text ¶

Simple Text From Markdown¶

Multi-line Text¶

Text-heavy Apps¶

Text From File¶

Code ¶

Simple Code Block¶

Formula ¶

Simple LaTeX Formula¶

HTML ¶

Simple HTML Content¶

`Text` ¶

`Code` ¶

`Formula` ¶

`HTML` ¶