Arrival Of Direct* Formatting** Into Roam: 3 Fascinating Use Cases
If we compare Roam to its competitors like RemNote (or, god forbid, Notion), there is one thing that stands out: Roam distinctively lacks direct formatting. You can use bold text, cursive, s̶t̶r̶i̶k̶e̶t̶h̶r̶o̶u̶g̶h̶ and some other limited options but they first have to be rendered by the system. What do I mean by that? Look at these two short GIFs:
Now compare it to Roam:
RemNote allows you to use bold font even if you edit the text. Roam, instead, uses the so-called markup language called Markdown. In other words, when you edit the block, you see
**bold text** instead of bold text.
However, the largest advantage of Roam over almost any similar type of software is its flexibility. Thanks to the very clever design of the code (check my Ode to customization of Roam), its extremely active community can find solution for almost any problem. And if the community needs some special additions into the code? Luckily, Roam Research listens to its suggestions.
Superpower of hashtags and pages
One of the great things about Roam is that it is extremely easy to modify its CSS thanks to a very well used system of .classes . Support for custom CSS is also built-in in Roam, because code blocks in the page [[roam/css]] are being automatically applied to the website.
If you don’t know what CSS is, you can check my series of articles on CSS for Roam here on Medium. However, even without knowledge of CSS, you can continue reading this and simply follow the necessary steps.
One of the early discoveries was that specific hashtags can be formatted. You can try the following:
- Open a page [[roam/css]] in Roam
/and select “Code block”
- In the top right corner of the Code block, select
- Copy the following code into that code-block
Now, write the tag
#something and you should get this:
A similar technique is used to enhance the formatting capabilities of Roam, like in this where the tag
#c:blue changes the color of the following highlighted text:
You can learn more about this technique in the 3rd lesson of my CSS for Roam.
Recently, Roam got a new superpower. Something that many of us wanted for a long time and what I tried to create in my (now obsolete) ROAMEXT extension: All hashtags within a block are now saved in the special attribute of the block. This might sound difficult to understand, so here is the image:
This means that a hashtag in the block can influence how the block will look like.
Note that we use the
*= in the selector. It means that
data-page-links must contain the string
color_blue . What is, however, that weird thing:
'\" . Without going into the details, the list of tags in
data-page-links in the HTML code looks like this:
data-page-links=["tag1","tag2","tag3"]". This use of
" seems to be a bug in Roam because the value of the attribute may contain only two
" signs: the opening and closing (or
' respectively). The proper way would be
data-page-links='["tag1", "tag2","tag3"]'. The internet browsers today deal with various errors quite well and this one is no exception. However, if we want to select
"color_blue" , better put
\ in front of
" to escape this character. I have tried several ways and this one seems to work consistently well.
Why do we want to select
"color_blue" and not just
color_blue ? The
" signs show where the hashtag starts and ends. Otherwise, by using just
color_blue we might inadvertently also select anything longer, like
This very same thing is also possible with [[pages]]. They also have their special
data- attributes. This is how the code looks like if we convert
[[color_blue]] (which in Roam is the very same element, just differently formatted).
Well, as you see, we don’t have to change our code at all! It already works (but only for the block level).
And if we want to hide hashtags or [[pages]]? We can simply target their
/* For hiding hashtags */
}/* For hiding page references */
So what we can do with this new knowledge?
3 Fascinating and colorful use cases
1. Font formatting
When I first found out about the possibility of formatting the blocks in this way, I wanted to simply add the bold text. So I created
#f:bold tag and came to this:
And to be fair, this works well! But then Beau Haan got a great idea: What about using
[[****]] instead? This has an amazing advantage: it speeds up the creation of the tag immensely because we can use the shortcut
ctrl+b (Windows) or
cmd+b (MacOS) to insert
We can also do the same for the italics by slightly modifying the code and using
ctrl+i (Windows) or
cmd+i (MacOS) to insert
Beau Haan also came up with some other nice examples! Check them out.
2. Nicer blockquotes
Recently, with the number of new features in Roam, we got also an easy way to create blockquotes in Roam. Simply write at the beginning of the block
> space and the text and you’ve got the blockquote.
As you see, by default, it does not preserve its formatting when clicked on. Moreover, I simply dislike its style. So what could we do with it while causing as less distraction as possible?
A nice feature of blockquote is that it works also when we write
[[>]] instead of
> . This will create a page in Roam called
> that will contain references to all quotes. However, even more importantly, this will also add reference to this page into
data-page-links attribute. What we can then create is this:
And this is the corresponding code:
There are noticeably two parts in the code: the first one changes the appearance of the block after its rendering, the second one (class
.rm-autocomplete__wrapper ) ensures the right formatting during editing of the block.
3. Colorful blocks
Finally, we can use all of this to create fancy colorful blocks that again preserve their format during editing. Their code is, again, surprisingly simple.
I have created three sets of hashtags that use the same rules to achieve different effects. The following image should demonstrate it well:
#blck:greenaffects only the block itself
#blck-chld:greenaffects the block and its children
#chld:greenaffects only children
You can find the code for other colors as well as for fonts and the blockquote on my companion [[page]].
Combine them all!
Do you remember that
data-page-links contains not just a single value but an array of all tags in the block? This means that we can actually combine different tags for the formatting.
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]]!