@curvenote/editor

Welcome to @curvenote/editor!

Feel free to ➡️ edit this document ⬅️, or for collaborative editing, check out curvenote.com, which is a scientific writing platform that connects to Jupyter. We would love if you came and supported us! ❤️

The Curvenote logo!

@curvenote/editor is a markdown accelerated editor.

  • # Starting a line with a hash creates a header. Multiple ##’s creates a smaller header

  • * Will create a bullet list. For numbered lists use 1. or you can start at a higher number!

  • / Will get you a list of the commands you can do

  • : for emotion 🎉 🥳 🚀

  • for code or ``` for a code block!

You can also configure the editor to show citations, like this one from Geophysics Cockett et al, 2015. Try clicking on the citation! Or choose one from the list with a [[ command

You can insert tables:

  • Insert using the /table command or from the insert menu

  • Add a row using /add row or explore other table-specific option menus

This is my table!

Header 1

Header 2

Header 3

Data over here

Multiple columns!

4

5

6

You can insert code:

  • Insert using the /code command or from the insert menu

  • Quickly add code using the ``` shortcut

You can insert footnotes:

This is a footnote👋. You can access it using the /footnote commandOr the menu under the plus!

This is a link block

link-block-url
Test title
link block description


You can add all sorts of things, like call out panels, asides, \LaTeX, equations, or embed videos!

x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

This will also translate to various other markup languages, using @curvenote/schema, you can see MyST, \LaTeX and HTML below.

Interactivity

  • Visitors:

    3

  • Cost:

    10

If there are

3
visitors and the admission cost is
$10
, the park will make
$30.00
.

Select some text to create an inline comment (cmd-opt-m). See curvenote.com for full demo.

Counts
Sections:
6 (0)
Figures:
1 (1)
Equations:
1 (0)
Code Blocks:
1 (0)
Tables:
1 (1)
Words:
311
Characters:
2051 (1733)

MyST

# Welcome to `@curvenote/editor`!

Feel free to ➡️ edit this document ⬅️, or for collaborative editing, check out [curvenote.com](https://curvenote.com), which is a scientific writing platform that connects to Jupyter. We would love if you came and supported us! ❤️

```{figure} https://curvenote.dev/images/logo.png
:name: fig1
:align: center
:width: 70%

The Curvenote logo!
```

`@curvenote/editor` is a markdown *accelerated* editor.

- `#` Starting a line with a hash creates a header. Multiple `##`’s creates a smaller header
- `*` Will create a bullet list. For numbered lists use `1.` or you can start at a higher number!
- `/` Will get you a list of the commands you can do
- `:` for emotion 🎉 🥳 🚀
- for code or ```` ``` ```` for a code block!

You can also configure the editor to show citations, like this one from Geophysics {cite:p}`simpeg2015`. Try clicking on the citation! Or choose one from the list with a `[[` command

## You can insert tables:

- Insert using the `/table` command or from the insert menu
- Add a row using `/add row` or explore other table-specific option menus

```{mdast} YhdOpLepf8
```

## You can insert code:

- Insert using the `/code` command or from the insert menu
- Quickly add code using the ```` ``` ```` shortcut

```typescript
function sayHello() {
  console.log("Hello editing!");
}
```

## You can insert footnotes:

This is a footnote(👋). You can access it using the `/footnote` command(Or the menu under the plus!)

````{important}
Speaking of commands! Try starting with a forward slash `/` after this callout panel.

````

## This is a link block

```{link-block} link-block-url
:title: Test title
link block description
```

You can add all sorts of things, like call out panels, asides, $\LaTeX$, equations, or embed videos!

$$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$

This will also translate to various other markup languages, using [@curvenote/schema](https://github.com/curvenote/schema), you can see MyST, $\LaTeX$ and HTML below.

## Interactivity

```{r:var}
:name: "visitors"
:value: "3"
:format: ".0f"
```

```{r:var}
:name: "cost"
:value: "10"
:format: ".0f"
```

- Visitors: {r:range}`rValue="visitors", rChange="{visitors: value}"` {r:display}`rValue="visitors", format="i"`
- Cost: {r:range}`rValue="cost", rChange="{cost: value}"` {r:display}`rValue="cost", format="i"`

If there are {r:display}`rValue="visitors", format="i"` visitors and the admission cost is {r:display}`rValue="cost", format="$"`, the park will make {r:display}`rValue="visitors*cost", format="$,.2f"`.

```{raw} html
<figure id="table1" align="center">
  <div style="position: relative; display: inline-block; padding-bottom: 39%; width: 70%;">
    <iframe width="100%" height="100%" src="https://www.loom.com/embed/524085f9c64e4652a12bd81a374d58df" allowfullscreen="" allow="autoplay" style="width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; border: none;"></iframe>
  </div>
</figure>
```

LaTeX

\section*{Welcome to \texttt{@curvenote/editor}!}

Feel free to ➡️ edit this document ⬅️, or for collaborative editing, check out \href{https://curvenote.com}{curvenote.com}, which is a scientific writing platform that connects to Jupyter. We would love if you came and supported us! ❤️

\begin{figure}[!htbp]
  \centering
  \includegraphics[width=0.7\linewidth]{https://curvenote.dev/images/logo.png}

  \caption{
    The Curvenote logo!
  }
  \label{fig1}
\end{figure}

\texttt{@curvenote/editor} is a markdown \textit{accelerated} editor.

\begin{itemize}
  \item \texttt{\#} Starting a line with a hash creates a header. Multiple \texttt{\#\#}'s creates a smaller header
  \item \texttt{*} Will create a bullet list. For numbered lists use \texttt{1.} or you can start at a higher number!
  \item \texttt{/} Will get you a list of the commands you can do
  \item \texttt{:} for emotion 🎉 🥳 🚀
  \item for code or \texttt{```} for a code block!
\end{itemize}

You can also configure the editor to show citations, like this one from Geophysics \citep{simpeg2015}. Try clicking on the citation! Or choose one from the list with a \texttt{[[} command

\subsection*{You can insert tables:}

\begin{itemize}
  \item Insert using the \texttt{/table} command or from the insert menu
  \item Add a row using \texttt{/add row} or explore other table-specific option menus
\end{itemize}

\begin{table}[!htbp]
  \centering
  \caption{
    This is my table!
  }
  \label{table1}

  \begin{tabular}{p{\dimexpr 0.333\linewidth-2\tabcolsep}p{\dimexpr 0.333\linewidth-2\tabcolsep}p{\dimexpr 0.333\linewidth-2\tabcolsep}}
    \toprule
    Header 1 & Header 2 & Header 3 \\
    \hline
    Data over here & \multicolumn{2}{p{\dimexpr 0.667\linewidth-2\tabcolsep}}{Multiple columns!} \\
    4 & 5 & 6 \\
    \bottomrule
  \end{tabular}
\end{table}

\subsection*{You can insert code:}

\begin{itemize}
  \item Insert using the \texttt{/code} command or from the insert menu
  \item Quickly add code using the \texttt{```} shortcut
\end{itemize}

\begin{verbatim}
  function sayHello() {
    console.log("Hello editing!");
  }
\end{verbatim}

\subsection*{You can insert footnotes:}

This is a footnote\footnote{👋}. You can access it using the \texttt{/footnote} command\footnote{Or the menu under the plus!}

\begin{callout}
  Speaking of commands! Try starting with a forward slash \texttt{/} after this callout panel.
\end{callout}

\subsection*{This is a link block}

\href{link-block-url}{Test title}

You can add all sorts of things, like call out panels, asides, $\LaTeX$, equations, or embed videos!

\begin{equation}
x = \frac{ -b \pm \sqrt{b^2 - 4ac}}{2a}
\end{equation}

This will also translate to various other markup languages, using \href{https://github.com/curvenote/schema}{@curvenote/schema}, you can see MyST, $\LaTeX$ and HTML below.

\subsection*{Interactivity}

{\bf `variable' not supported in \LaTeX}
{\bf `variable' not supported in \LaTeX}
\begin{itemize}
  \item Visitors: {\bf `range' not supported in \LaTeX} {\bf `display' not supported in \LaTeX}
  \item Cost: {\bf `range' not supported in \LaTeX} {\bf `display' not supported in \LaTeX}
\end{itemize}

If there are {\bf `display' not supported in \LaTeX} visitors and the admission cost is {\bf `display' not supported in \LaTeX}, the park will make {\bf `display' not supported in \LaTeX}.

{\bf `iframe' not supported in \LaTeX}

Plain Text

Welcome to @curvenote/editor!

Feel free to ➡️ edit this document ⬅️, or for collaborative editing, check out curvenote.com, which is a scientific writing platform that connects to Jupyter. We would love if you came and supported us! ❤️

The Curvenote logo!

@curvenote/editor is a markdown accelerated editor.

* # Starting a line with a hash creates a header. Multiple ##’s creates a smaller header
* * Will create a bullet list. For numbered lists use 1. or you can start at a higher number!
* / Will get you a list of the commands you can do
* : for emotion 🎉 🥳 🚀
* for code or ``` for a code block!

You can also configure the editor to show citations, like this one from Geophysics {cite:p}`simpeg2015`. Try clicking on the citation! Or choose one from the list with a [[ command

You can insert tables:

* Insert using the /table command or from the insert menu
* Add a row using /add row or explore other table-specific option menus

This is my table!

|  Header 1 | Header 2 | Header 3 |
|---|---|---|
|  Data over here |Multiple columns!  |Multiple columns!  |
|  4 | 5 | 6 |

You can insert code:

* Insert using the /code command or from the insert menu
* Quickly add code using the ``` shortcut

function sayHello() {
  console.log("Hello editing!");
}

You can insert footnotes:

This is a footnote👋

. You can access it using the /footnote commandOr the menu under the plus!

Speaking of commands! Try starting with a forward slash / after this callout panel.

This is a link block

link block description

You can add all sorts of things, like call out panels, asides, \LaTeX, equations, or embed videos!

x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

This will also translate to various other markup languages, using @curvenote/schema, you can see MyST, \LaTeX and HTML below.

Interactivity

* Visitors:  {r:display}`rValue="visitors", format="i"`
* Cost:  {r:display}`rValue="cost", format="i"`

If there are {r:display}`rValue="visitors", format="i"` visitors and the admission cost is {r:display}`rValue="cost", format="$"`, the park will make {r:display}`rValue="visitors*cost", format="$,.2f"`.

HTML

<h1>Welcome to <code>@curvenote/editor</code>!</h1><p>Feel free to ➡️ edit this document ⬅️, or for collaborative editing, check out <a href="https://curvenote.com" kind="external">curvenote.com</a>, which is a scientific writing platform that connects to Jupyter. We would love if you came and supported us! ❤️</p><figure id="fig1" numbered="" align="center" multipage="false" landscape="false" fullpage="false"><img src="https://curvenote.dev/images/logo.png" align="center" width="70%"><figcaption kind="fig">The Curvenote logo!</figcaption></figure><p><code>@curvenote/editor</code> is a markdown <em>accelerated</em> editor.</p><ul><li><p><code>#</code> Starting a line with a hash creates a header. Multiple <code>##</code>’s creates a smaller header</p></li><li><p><code>*</code> Will create a bullet list. For numbered lists use <code>1.</code> or you can start at a higher number!</p></li><li><p><code>/</code> Will get you a list of the commands you can do</p></li><li><p><code>:</code> for emotion 🎉 🥳 🚀</p></li><li><p>for code or <code>```</code> for a code block!</p></li></ul><p>You can also configure the editor to show citations, like this one from Geophysics <cite-group><cite key="simpeg2015" kind="cite">Cockett et al, 2015</cite></cite-group>. Try clicking on the citation! Or choose one from the list with a <code>[[</code> command</p><h2>You can insert tables:</h2><ul><li><p>Insert using the <code>/table</code> command or from the insert menu</p></li><li><p>Add a row using <code>/add row</code> or explore other table-specific option menus</p></li></ul><figure id="table1" numbered="" align="center" multipage="false" landscape="false" fullpage="false"><figcaption kind="table">This is my table!</figcaption><table><tbody><tr><th><p>Header 1</p></th><th><p>Header 2</p></th><th><p>Header 3</p></th></tr><tr><td><p>Data over here</p></td><td colspan="2"><p>Multiple columns!</p></td></tr><tr><td><p>4</p></td><td><p>5</p></td><td><p>6</p></td></tr></tbody></table></figure><h2>You can insert code:</h2><ul><li><p>Insert using the <code>/code</code> command or from the insert menu</p></li><li><p>Quickly add code using the <code>```</code> shortcut</p></li></ul><pre language="typescript" title="" linenumbers=""><code>function sayHello() {
  console.log("Hello editing!");
}</code></pre><h2>You can insert footnotes:</h2><p>This is a footnote<span class="footnote">👋</span>. You can access it using the <code>/footnote</code> command<span class="footnote">Or the menu under the plus!</span></p><aside class="callout info"><p>Speaking of commands! Try starting with a forward slash <code>/</code> after this callout panel.</p></aside><h2>This is a link block</h2><div data-url="link-block-url" title="Test title" class="link-block">link block description</div><p></p><p>You can add all sorts of things, like call out panels, asides, <r-equation inline="">\LaTeX</r-equation>, equations, or embed videos!</p><r-equation>x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}</r-equation><p>This will also translate to various other markup languages, using <a href="https://github.com/curvenote/schema" kind="external">@curvenote/schema</a>, you can see MyST, <r-equation inline="">\LaTeX</r-equation> and HTML below.</p><h2>Interactivity</h2><r-var name="visitors" value="3" format=".0f"></r-var><r-var name="cost" value="10" format=".0f"></r-var><ul><li><p>Visitors: <r-range :value="visitors" :change="{visitors: value}" min="0" max="100" step="1"></r-range> <r-display :value="visitors" format="i"></r-display></p></li><li><p>Cost: <r-range :value="cost" :change="{cost: value}" min="0" max="100" step="1"></r-range> <r-display :value="cost" format="i"></r-display></p></li></ul><p>If there are <r-display :value="visitors" format="i"></r-display> visitors and the admission cost is <r-display :value="cost" format="$"></r-display>, the park will make <r-display :value="visitors*cost" format="$,.2f"></r-display>.</p><iframe src="https://www.loom.com/embed/524085f9c64e4652a12bd81a374d58df" align="center" width="70%"></iframe>