Updating Quarto and Helpful Features

blogging
quarto
update
Author

Christian Wittmann

Published

June 22, 2024

After completing the blog post on How LLMs are Trained, I took some time for blog maintenance. A Quarto upgrade was necessary, and I also wanted to introduce you to some features I find worth noting.

Updating Quarto

Sometimes I find myself obsessing over minor details. While publishing the blog post on How LLMs are Trained, I noticed that the old Twitter logo needed to be updated to the new X logo. Although it seemed like a small task, it turned out to be more complicated than expected. The icons are standard bootstrap icons, but the new icon (twitter-x) did not render correctly.

Upon investigation, I discovered that my Quarto installation was outdated. Running quarto --version returned 1.3.450, but the updated icon was only supported in version 1.4.

Since this was my first Quarto update, I followed my own guide to avoid disaster and pushed all my changes to GitHub. This way, if something went wrong, I wouldn’t lose any data.

As it turned out, the precautions were unnecessary, but beware of the outcome bias 😉. Anyway, here are the steps for updating Quarto:

Step 1: Update nbdev

In analogy to the initial installation, I upgraded nbdev:

mamba update nbdev -c fastai

Step 2: Update Quarto

To update Quarto, you should be in the home directory (cd ~):

nbdev_install_quarto

Step 3: Verify the Update

After the installation process is complete, verify that Quarto has been installed by checking its version:

quarto --version

I am now on version 1.4.555, and the new X icon renders as it should 😀.

Using Directives

Working in Jupyter notebooks is great, but converting notebook 1:1 into blog posts I find sometimes challenging due to the technical nature of a notebook, making it hard to read. For example, sometimes I need a plot, but the code to create the plot does not add any value to the blog post. Creating the plot separately and using a screenshot felt inefficient, but apparently, I was not the only one thinking along these lines. Directives help solve these formatting challenges. Here are the directives I have used (and will most certainly use in future blog posts).

Hiding Cell Output (Displaying the Code)

Some cells are quite verbose, outputting text that does not add any value to the blog post. One example would be initializing an LLM, for example in Remembering the Wittmann Tours World Trip with RAG. The command llm = Llama(model_path="llama-2-7b-chat.Q4_K_M.gguf", n_ctx=4096, verbose=False) outputs a lot of text, even though verbose is set to False. To silence the chatter, you can simply use the output directive. The first line of the cell in your Jupyter notebook needs to be:

#| output: false

Hiding the Code (Displaying the Output)

In contrast, some cells contain code that isn’t relevant, but you want the output to be rendered in your blog post. In Visualizing Embeddings in 2D, I had several charts that required lengthy code to generate, but only the result was important. Use the echo directive to hide the code. The first line of the cell in your Jupyter notebook needs to be:

#| echo: false

Toggling Code (Code Fold)

In other cases, the code might not be highly relevant, but you still want to include it in the blog post. To make displaying the code optional, use the code fold directive. The first line of the cell in your Jupyter notebook needs to be:

#| code-fold: true

Including Mermaid Charts/Diagrams

Mermaid charts or diagrams are my go-to choice for visualizations in markdown and Jupyter notebooks because the programmatic approach saves a lot of time compared to tedious PowerPoint editing. When including a mermaid diagram in a Jupyter notebook for a blog post, a code block starting with ```mermaid, however, does not rendered correctly. To use a mermaid code block in the context of Quarto, it needs to use additional curly braces {} like this:

```{mermaid}

  put mermaid diagram here

```

P.S.: Thanks to Christian Long for the markdown syntax to render a complete code block.