Arrival Of Direct* Formatting** Into Roam: 3 Fascinating Use Cases

* Almost ** Requires a little bit of CSS

Give your Roam a little bit of colors
Direct formatting in RemNote
Direct formatting in RemNote
Direct formatting in RemNote
Formatting in Roam uses so-called Markup — it disappears when we edit it directly
Formatting in Roam uses so-called Markup — it disappears when we edit it directly
Formatting in Roam uses so-called Markup — it disappears when we edit it directly

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.

  1. Press / and select “Code block”
  2. In the top right corner of the Code block, select CSS .
  3. Copy the following code into that code-block
[data-tag="something"] {
color:red;
}
Example of the simplest formatting of hashtags in Roam
Example of the simplest formatting of hashtags in Roam
The simplest formatting of hashtags
Using tags for formatting following elements.
/* For hiding hashtags */
[data-tag="color_blue"] {
display:none;
}
/* For hiding page references */
[data-link-title="color_blue"] {
display:none;
}

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:

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.

Code

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.

  • #blck-chld:green affects the block and its children
  • #chld:green affects only children

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.

We can freely combine different tags

Just a humble Roaman duck.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store