Search code examples
htmlfontslatexmarkdowngoogle-colaboratory

Using google colab markdown How to display squiggly lines under text

Google colab markdown supports both html as well as latex. I want to display squiggly lines under some text using colab markdown but it's not rendering the squiggly lines.

Latex:

\uwave{This text is underlined with a wavy line!}

Html:

## <font color='grey' style="text-decoration: underline wavy;"> **Analysis** </font>

How to display squiggly lines under text on google colab?

Solution

  • According to the Colab Markdown Guide, the tool uses the marked.js library to render Latex. Since marked.js does not support underlining (GitHub Issue), it's not possible to render waving underlines in Colab using Latex.

    One imperfect solution is to use Jupyter's %%html magic, which is a way to tell Jupyter to render the cell block as HTML code:

    %%html
<font color='skyblue' style="font-size: 24px; text-decoration: underline wavy;"> There's a wavy line beneath me</font>

    Since this is a Jupyter command, you need to run the cell as code. Also, you probably want to hide the raw HTML code ("Tools" -> "Command Palette" -> "Show/hide code").

    The result looks something like the image below. Unfortunately, you can't get rid of the little "show code" link, which is why this solution is not perfect:

    enter image description here