Hide/Show the code
<- rnorm(10) x
This is the abstract - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere vestibulum facilisis. Aenean pretium orci augue, quis lobortis libero accumsan eu. Nam mollis lorem sit amet pellentesque ullamcorper. Curabitur lobortis libero eget malesuada vestibulum. Nam nec nibh massa. Pellentesque porttitor cursus tellus. Mauris urna erat, rhoncus sed faucibus sit amet, venenatis eu ipsum.
This document provides a template based on the quarto system for contributions to Computo (Computo Team 2021). We show how Python
(Perez, Granger, and Hunter 2011) or R
(R Core Team 2020) code can be included.
This section covers basic formatting guidelines. Quarto is a versatile formatting system for authoring HTML based on markdown, integrating \(\LaTeX\) and various code block interpreted either via Jupyter or Knitr (and thus deal with Python, R and many other langages). It relies on the Pandoc Markdown markup language.
We will only give some formatting elements. Authors can refer to the Quarto web page for a complete view of the formatting possibilities.
Quarto itself is a work-in-progress and a lot of bugs are constantly fixed or features added. As such, we recommend:
To render/compile a document, run quarto render
. A document will be generated that includes both content as well as the output of any embedded code chunks within the document:
quarto render content.qmd # will render to html
Bold text or italic
But we can also do a numbered list
\(\LaTeX\) code is natively supported1, which makes it possible to use mathematical formulae:
will render
\[ f(x_1, \dots, x_n; \mu, \sigma^2) = \frac{1}{\sigma \sqrt{2\pi}} \exp{\left(- \frac{1}{2\sigma^2}\sum_{i=1}^n(x_i - \mu)^2\right)} \]
It is also posible to cross-reference an equation, see Equation 1:
\[ \begin{aligned} D_{x_N} & = \frac12 \left[\begin{array}{cc} x_L^\top & x_N^\top \end{array}\right] \, \left[\begin{array}{cc} L_L & B \\ B^\top & L_N \end{array}\right] \, \left[\begin{array}{c} x_L \\ x_N \end{array}\right] \\ & = \frac12 (x_L^\top L_L x_L + 2 x_N^\top B^\top x_L + x_N^\top L_N x_N), \end{aligned} \tag{1}\]
Quarto includes a nice support for theorems, with predefined prefix labels for theorems, lemmas, proposition, etc. see this page. Here is a simple example:
Theorem 1 (Strong law of large numbers) The sample average converges almost surely to the expected value:
\[\overline{X}_n\ \xrightarrow{\text{a.s.}}\ \mu \qquad\textrm{when}\ n \to \infty.\]
See Theorem 1.
Quarto uses either Jupyter or knitr to render code chunks. This can be triggered in the yaml header, e.g., for Jupyter (should be installed on your computer) use
---
title: "My Document"
author "Jane Doe"
jupyter: python3
---
For knitr (R + knitr must be installed on your computer)
---
title: "My Document"
author "Jane Doe"
---
You can use Jupyter for Python code and more. And R + KnitR for if you want to mix R with Python (via the package reticulate Ushey, Allaire, and Tang (2020)).
R
code (R Core Team 2020) chunks may be embedded as follows:
<- rnorm(10) x
Plots can be generated as follows and referenced. See plot ?@fig-gg:
Interactive plots may also be produced in the HTML output of the document2:
It is also possible to create figures from static images:
Tables (with label: @tbl-mylabel
renders Table 1) can be generated with markdown as follows
| Tables | Are | Cool |
|----------|:-------------:|------:|
| col 1 is | left-aligned | $1600 |
| col 2 is | centered | $12 |
| col 3 is | right-aligned | $1 | : my table caption {#tbl-mylabel}
Tables | Are | Cool |
---|---|---|
col 1 is | left-aligned | $1600 |
col 2 is | centered | $12 |
col 3 is | right-aligned | $1 |
We also integrate the list tables filter from Pandoc, so that you may alternatively use this format , easier to write and maintain:
:::list-table * - row 1, column 1
- row 1, column 2
- row 1, column 3
* - row 2, column 1
- - row 2, column 3
* - row 3, column 1
- row 3, column 2
:::
row 1, column 1 | row 1, column 2 | row 1, column 3 |
---|---|---|
row 2, column 1 | row 2, column 3 | |
row 3, column 1 | row 3, column 2 |
Table can also be generated by some code, for instance with knitr
here:
::kable(summary(cars), caption = "Table caption.") knitr
speed | dist | |
---|---|---|
Min. : 4.0 | Min. : 2.00 | |
1st Qu.:12.0 | 1st Qu.: 26.00 | |
Median :15.0 | Median : 36.00 | |
Mean :15.4 | Mean : 42.98 | |
3rd Qu.:19.0 | 3rd Qu.: 56.00 | |
Max. :25.0 | Max. :120.00 |
A solution to typeset pseudocode just like you would do with \(\LaTeX\), yet with HTML output is to rely on the JavaScript pseudocode.js. Your pseudocode is written inside a Code Block with the pseudocode
class. Do not forget the class tag, that will trigger the rendering process of your pseudo-code. The result is as follows3:
```pseudocode
#| label: alg-quicksort
#| html-indent-size: "1.2em"
#| html-comment-delimiter: "//"
#| html-line-number: true
#| html-line-number-punc: ":"
#| html-no-end: false
#| pdf-placement: "htb!"
#| pdf-line-number: true
\begin{algorithm}
\caption{Quicksort}
\begin{algorithmic}
\Procedure{Quicksort}{$A, p, r$}
\If{$p < r$}
\State $q = $ \Call{Partition}{$A, p, r$}
\State \Call{Quicksort}{$A, p, q - 1$}
\State \Call{Quicksort}{$A, q + 1, r$}
\EndIf
\EndProcedure
\Procedure{Partition}{$A, p, r$}
\State $x = A[r]$
\State $i = p - 1$
\For{$j = p, \dots, r - 1$}
\If{$A[j] < x$}
\State $i = i + 1$
\State exchange
$A[i]$ with $A[j]$
\EndIf
\State exchange $A[i]$ with $A[r]$
\EndFor
\EndProcedure
\end{algorithmic}
\end{algorithm}
```
Algorithm 1 is extracted from Chapter 7, Introduction to Algorithms (3rd edition).
In addition of quarto supported diagrams, we also support tikz diagrams. The following example4 is rendered as follows.
For learning TiKZ, I recommend this website: Tikz examples.
A simple example of a commutative diagram with \(\texttt{tikz}\).
You may refer to it as Figure 2.
References are displayed as footnotes using BibTeX, e.g. [@computo]
will be displayed as (Computo Team 2021), where computo
is the bibtex key for this specific entry. The bibliographic information is automatically retrieved from the .bib
file specified in the header of this document (here:references.bib
).
As already (partially) seen, Quarto includes a mecanism similar to the bibliographic references for sections, equations, theorems, figures, lists, etc. Have a look at this page.
To go into more involved details, you can also simply check the source code of this document (button at the top), or have a look at the source of our t-sne remake example.
The pdf output is just a screenshot of the interactive plot from the html output↩︎
For proper pdf rendering, use Camel cased names for all algorithmic
keywords, not upper case ones, like the examples in pseudocode.js
’s documentation, which are not compatible with LaTeX.↩︎
This is the new syntax for cross-references since quarto 1.4, see Crossreferenceable elements↩︎
@article{joe2024,
author = {Joe, John},
title = {NeurIPS {Journal} {Format}},
journal = {NeurIPS},
date = {2024-07-23},
url = {https://github.com/computorg/computo-quarto-extension},
doi = {10.xxxx/xxx-xxx},
issn = {2824-7795},
langid = {en}
}