Text, Formulas, Code, and HTML

Search…
Datapane allows you to add markdown text to your reports, including helpers for creating text-heavy Python reports.
Text
The best way to include long-form text is to use the Web Editor, which allows you to add and edit text directly in the browser, and preview the result. 
However, you can still add text from within your Python script, as follows: 
Markdown is a lightweight markup language that allows you to include formatted text in your report, and can be access through dp.Text, or by passing in a string directly. 
1
import datapane as dp
2
​
3
dp.Report(dp.Text("__My awesome markdown__"))
4
​
5
# or dp.Report("__My awesome markdown__")
Copied!
To include multi-line text and formatting the words, use triple-quoted string, e.g. """Some words"""
Python
Text Report
1
import datapane as dp
2
​
3
md = """
4
Quas *diva coeperat usum*; suisque, ab alii, prato. Et cornua frontes puerum,
5
referam vocassent **umeris**. Dies nec suorum alis adstitit, *temeraria*,
6
anhelis aliis lacunabant quoque adhuc spissatus illum refugam perterrita in
7
sonus. Facturus ad montes victima fluctus undae Zancle et nulli; frigida me.
8
Regno memini concedant argento Aiacis terga, foribusque audit Persephone
9
serieque, obsidis cupidine qualibet Exadius.
10
​
11
    utf_torrent_flash = -1;
12
    urlUpnp -= leakWebE - dslam;
13
    skinCdLdap += sessionCyberspace;
14
    var ascii = address - software_compile;
15
    webFlaming(cable, pathIllegalHtml);
16
​
17
## Quo exul exsecrere cuique non alti caerulaque
18
​
19
*Optatae o*! Quo et callida et caeleste amorem: nocet recentibus causamque.
20
​
21
- Voce adduntque
22
- Divesque quam exstinctum revulsus
23
- Et utrique eunti
24
- Vos tantum quercum fervet et nec
25
- Eris pennis maneas quam
26
"""
27
report = dp.Report(md)
28
report.upload(name = 'markdown')
Copied!
1
```datapane
2
block: text
3
text: hello world
4
```
Copied!
​
Check here for more information on how to format your text with markdown.
Text-heavy Reports
If your report 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, Datapane provides a format option, which allows you to write a single block of Markdown (either in your report, 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.
1
import seaborn as sns
2
import altair as alt 
3
import datapane as dp
4
​
5
md = """
6
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.
7
​
8
{{plot}}
9
​
10
Altair allows you to create some extremely interactive plots which do on-the-fly calculations — without even requiring a running Python server!
11
"""
12
​
13
titanic = sns.load_dataset("titanic")
14
​
15
points = alt.Chart(titanic).mark_point().encode(
16
    x='age:Q',
17
    color='class:N',
18
    y='fare:Q',
19
).interactive().properties(width='container')
20
​
21
dp.Report(
22
  dp.Text(md).format(plot=points)
23
).upload(name='altair_example')
Copied!
Alternatively, you can write your article or post in your favourite markdown editor, and pass it in as a file.
1
import datapane as dp
2
​
3
...
4
​
5
dp.Report(
6
  dp.Text(file="./my_blogpost.md").format(plot=points)
7
)
Copied!
Formulas
The formula block allows you easily to add LaTeX-formatted equations to your report, with an optional caption. A brief intro into LaTeX formulas can be found here. 
Python
Web Report
1
import datapane as dp
2
​
3
dp.Report(
4
  dp.Formula(r"\frac{1}{\sqrt{x^2 + 1}}", caption="")
5
).upload("formula")
Copied!
1
```datapane
2
block: Formula
3
formula: x^2 + y^2 = z^2
4
```
Copied!
LaTeX formulas commonly make use of special characters, hence prefix your formulas with r in Python as per the example above to make them raw strings, e.g. r"x^2"
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. 
Code
The code block allows you to embed syntax highlighted source code into your report. This block currently supports Python and JavaScript.
For the Web Editor 
Python
Web Report
1
import datapane as dp
2
​
3
code = '''
4
function foo(n) {
5
  return foo(n + 1)
6
}
7
'''
8
​
9
dp.Report(
10
   dp.Code(
11
      code=code,
12
      language="javascript"
13
   )
14
).upload(name='code')
Copied!
1
```datapane
2
block: Code
3
language: javascript
4
code: |
5
    function foo(n) {
6
      return foo(n + 1)
7
    }
8
```
Copied!
​
HTML
The HTML block allows you to add raw HTML to your report,  allowing for highly customized components, such as your company's brand, logo, and more.
The HTML component is sandboxed and cannot execute JavaScript.
Python
Web Editor
1
import datapane as dp
2
​
3
html = """
4
<html>
5
    <style type='text/css'>
6
        @keyframes example {
7
            0%   {color: #EEE;}
8
            25%  {color: #EC4899;}
9
            50%  {color: #8B5CF6;}
10
            100% {color: #EF4444;}
11
        }
12
        #container {
13
            background: #1F2937;
14
            padding: 10em;
15
        }
16
        h1 {
17
            color:#eee;
18
            animation-name: example;
19
            animation-duration: 4s;
20
            animation-iteration-count: infinite;
21
        }
22
    </style>
23
    <div id="container">
24
      <h1> Welcome to my Report </h1>
25
    </div>
26
</html>
27
"""
28
​
29
dp.Report(
30
  dp.HTML(
31
    html
32
  )
33
).upload(name='docs_html')
Copied!
1
```datapane
2
block: HTML
3
html: |
4
  <html>
5
      <style type='text/css'>
6
          @keyframes example {
7
              0%   {color: #EEE;}
8
              25%  {color: #EC4899;}
9
              50%  {color: #8B5CF6;}
10
              100% {color: #EF4444;}
11
          }
12
          #container {
13
              background: #1F2937;
14
              padding: 10em;
15
          }
16
          h1 {
17
              color:#eee;
18
              animation-name: example;
19
              animation-duration: 4s;
20
              animation-iteration-count: infinite;
21
          }
22
      </style>
23
      <div id="container">
24
        <h1> Welcome to my Report </h1>
25
      </div>
26
  </html>
27
```
Copied!
​
Plots and Visualizations
Layout, Pages, and Selects
Last modified 3mo ago
Copy link
Contents