The Article That Inspired Roam to Implement Blockquotes: 5 Now Luckily Unnecessary Solutions and How to Do Them Properly
Update: It took just a couple of hours after publishing this article and Cortex Futura to get native blockquotes in Roam!
> at the beginning of your block, write anything you want and here it is!
But if you want to experiment and maybe find an alternative way for blockquotes, read further :). It is still a fun journey!
However, first, we have to define: what do we mean by the blockquote? The blockquote is a way how to display a long quote visually different from the rest of the text. For example, Medium has two types of blockquote:
This one, which looks quite well! And it is also the style I prefere for my own blockquotes.
And this one, which is a little bit more striking.
Probably the first attempts to recreate them in Roam I made were soon after I discovered the great power of
#tags in Roam. When put in front of various elements, like highlighted text, they can be used to change their appearance. I am using it, e.g., for adding colours to Roam like this:
You can learn more about it in my course on CSS, specifically, in lesson 3 of CSS for Roam.
The issue is, that the highlighting in Roam is an inline element. This may not say you much but it basically means that it is impossible to make a nice blockquote because, well, it is inline, not a block!
To demonstrate the issue, let’s look at what happens if we use a longer highlighted text and try to add the left border:
Well, not perfect! This brings us to other solutions.
This was probably the first successful hack I attempted. The idea was simply to redefine text-align options of blocks. These ones:
The reason? In the code of Roam, they are (together with H1-H3, i.e. headlines) the formatting that gets its own special class on the block level. And while I am using H1-H3 very often, frankly, I am almost not using text-align options at all. So why not to do something with them?
You can redefine them in the same way as other tags! At one moment, I used almost all of them: centre for the blockquote, justify for two-column text, right-align for comments. And it worked! It is even one of the few hacks that display blockquotes properly even if you are in an edit mode in which another styling is rendered only as a markdown at best.
Even the code is quite simple:
Yet, it wasn’t perfect. First, it cannot be queried by any means without adding a #tag, second — more importantly — I do prefer leaving standard features as they are and build upon them, not redefine them.
He is a senior software engineer and it shows! The userscript has multiple functions and it is so elegantly programmed. This script was for me a huge inspiration to create something similar (far less skillfully programmed) but more universal — a Roam plugin called ROAMEXT.
After installing the ROAMEXT, you need just a simple code:
Then I can simply write
Now if I want to hide that tag, I can add:
And that is all. Works very well! Since I am not a professional programmer, the code of ROAMEXT still has some smaller issues and it is not really efficient but I am working on improvements!
Tables as quotes
The preceding solution is good. I really like it. Yet, the need for a special roam/js plugin makes it difficult to use, e.g., in databases with multiple users, because each user would have to allow such a plugin.
Then I saw this picture from the Twitter user @todayIwasbetter:
And I knew. I wanted something similar! But not done in :hiccup as he did very nicely but more natively. And then I got an idea: why not to simply use tables for quotes?
Tables in Roam can be styled based on preceding tags in the same way as other elements. This gives them, again, great power for customization. E.g., we can use them for coloring tables.
So why not to style them as blockquotes? My resulting code was as follow:
This is how it looks like on the [[page]] in Roam:
And this is its rendering:
The code needs a little bit of explanation. First, I remove all possible borders. Then I change the table from “collapsed” to “separate”. This allows me to have a different border to a cell and then a different border for the whole table. I can then use it to draw the orange vertical line as border-left.
You don’t want to write it in such a complicated way? Then try a great plugin called Roam42 from roamhacker that contains in its Beta version an amazing template system called SmartBlocks (so be sure you install the beta!). After you install it, copy the following code anywhere, e.g., into [[roam/template]] page.
;; and select the blockquote.
And you have your blockquote!
Back to the beginnings
Finally, I came back to beginnings and I started to ask myself: isn’t there an easier solution? When I tried to use a simple tag and highlighting, this did not work because
<span> that contains the highlighting is an inline element. However, what if we change it?
Yes, it is not for what it was meant to be by the gods of HTML specification. However, it is also nothing outrageous. No we have to just change quickly colors and bind it to a tag.
Optionally, you can, of course, hide the tag:
span to inline-block is actually very powerful. It allows us to align elements as we want and to do a lot of fun stuff. I used it, e.g., to create simple coloured blocks for Roam:
Or even creating tooltips in Roam!
Of course, as always, there are some disadvantages.
- We cannot use highlight within highlight — so we lose this function. It can be, however, easily simulated, if needed.
- We have to highlight the text of the blockquote.
Otherwise, I really like this last solution. It is simple, clean and works everywhere.
You can find code to all on my companion page in Roam.
Are these the final solutions for blockquotes in Roam? No, definitely not. First, we can expect that one day we will get native support for them. Secondly, there are so many other things you could try and attempt! Use :hiccup, SVG, LaTeX, You can hack the kanban to look like a blockquote, you can even redefine the Mermaid graphs. There are no limits to your imaginations, only to the practicality.
If you like my work, follow me on Twitter, check the public Roam database Roam-tricks, my personal public collection of my hacks, and yes, you can support me on Patreon or through PayPal. I would really appreciate it and you would help to make future articles happen. And remember: If it looks like a duck, if it writes like a duck, it’s probably me. [[QUACK]]!