This is my personal version of the classic Railscast code syntax theme that I've tweaked over the years. This version has been created to work with Roam Research.
-
In Roam, create a page called
roam/css(all lowercase) -
Create a code block using
``` -
Paste in the following into the code block
@import url('https://jmharris903.github.io/Railscast-for-Roam-Research-Theme/RailsRoam.css'); -
Then change the menu option to
css
Other ways to install
Install either Stylus or Roam Toolkit. Then copy and paste the contents of the RailsRoam.css file into the appropriate location for the method you choose.
The pictured version uses the beautiful serif font Calendas Plus by Atipo Type Foundry. I have no affiliation, but support them and buy the font. You'll thank yourself later.
The monospaced font is Source Code Pro
At the top of the CSS file is a set of variables you can use to customize the theme. Just change the color values to suit your preference.
Roam Railscast includes native support for the following optional add-on features:
Note: For compatibility, the orignal Masonry had to be edited slightly. To work with Railscast, you must use the version below
@import url('https://jmharris903.github.io/Railscast-for-Roam-Research-Theme/features/masonry-main.css');
Having trouble with the Masonry import? Try adding this a CSS code block on the roam/css page
@import url('https://gitmurf.github.io/masonry-vanilla/masonry-main.css');
:root {
/* ======================================== */
/* features */
/* masonry */
--masonry__background-color: var(--rm-body__background-color);
--main-left-bg: var(--rm-body__background-color);
--masonry-bg: var(--rm-body__background-color);
--right-sidebar-bg: var(--rm-right-sidebar__background-color);
--masonry-border: 1px solid rgba(228, 124, 67, 0.25);
--masonry-resizer-color: var(--rm-icon__color);
//--rm-main-font__font-size: 1.2rem;
}
#right-sidebar {
border-left: var(--masonry-border);
}
When zoomed in on a bullet add the tag #.rm-focus to the parent block to create a minimal writing environment. This only works when zoomed in so there is no need to remove the tag when done.
@import url('https://jmharris903.github.io/Railscast-for-Roam-Research-Theme/features/bullet-zoom-focus.css');
/* MINIMIZE QUERIES v2.1 by Jeff Harris
A feature of Roam Mosaic https://github.com/roam-mosaic/theme-boilerplate
Add any of the following tags to your query (in the same block). They can be used in combination to customize what information is hidden
#.q--q = hides the query
#.q--title = hides the page title of the reference
#.q--mentions = hides the contextual reference information (breadcrumbs)
#.q--bg = hides the background of each individual query result
#.q--compact = removes extra space between each query result
#.q--hover = shows title and mentions on hover of an individual query result
#.q--all = hides everything with one tag, rendering the query nearly invisible
inspired by Matt Goldenberg
*/
/* Block Callouts
Use special tags to create colored callout blocks
#.rm-block--grey will callout the entire block, including children
#.rm-self--grey will only callout the block the tag is added to
#.rm-child--grey will callout the children of the block the tag is added to
Available colors
--grey
--blue
--red
--orange
--yellow
*/
/* Page Date Link
A fun little feature to change the color of dates to match the seasons, organized by quarter
*/
:root {
/* Seasonal colors for date links */
--page-link-date__color_q1: #50b2c0;
--page-link-date__color_q2: #c5d86d;
--page-link-date__color_q3: #ff6b6b;
--page-link-date__color_q4: #ca7d4a;
}
/* Outline Highlight
Highlights where the curser is currently in the outline and highlights the currently active block using the rm-multibar
*/
/* Full Width Search
Changes the search bar to be full screen width all the time, no animations
*/
https://github.com/vandermerwed/Roam-Research-Dark