Roam Research underpins all of the text content on this site. I send it over from my personal roam graph using the Postman plugin. This outputs "roam-formatted html", which 1. Doesn't look great with no styling, and 2. Contains links to other internal graph pages.

So we need to first sanitize it, then style it, before displaying it on the site. Below are some of the snippets I use to do that.

CSS

Images

Default to max width. Use w-full to make one wider

.format_roam img {
  max-width: 400px;
  margin: 0 auto;
  border: 1px solid #dfdfdf;
  border-radius: 5px;
}
.format_roam ul li.w-full > ul > li > p > img{
  max-width: 100%;
}

Indentation

This is a tricky one - the best balance I found was to support one level of indentation - by default the top level gets formatted as paragraphs with margin, then anything underneath it appears bulleted.

.format_roam > ul {
  list-style: none;
}

.format_roam ul li p {
  margin: 0 0 20px 0;
}

.format_roam ul li ul  {
  list-style: disc;
  margin-bottom: 10px;
}
.format_roam ul li ul li {
  margin-left: 12px;
}

General Formatting

.format_roam {

}

.format_roam .rm-bold {
  font-weight: bold;
}

.format_roam ul li p a{
  color: rgb(0, 157, 255);
  text-decoration: underline;
} 

.format_roam h1 {
  font-size: 1.5rem;
  margin-bottom: 15px;
}

.format_roam h2 {
  font-size: 1.35rem;
  margin: 10px 0px 3px 0px;
}
.format_roam h3 {
  font-size: 1.2rem;
  margin: 10px 0px 3px 0px;
}

.format_roam pre {
  border-radius: 4px;
  overflow-x: scroll;
  background-color: #efefef;
  padding: 6px;
  font-size: 12px;
}
.format_roam pre code {
  background-color: none;
  padding: 0px;
}
.format_roam code {
  background-color: #efefef;
  padding: 2px 4px;
  border-radius: 2px;
  font-size: 12px;
}
.format_roam .gallery-portrait {
  list-style: none;
}
.format_roam .gallery-portrait ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.format_roam .gallery-portrait iframe {
  height: 410px;
  width: 100%;
}

Strip out the links

def sanitize_roam_html(html)
  doc = Nokogiri::HTML(html)

  # Find all <a> elements and replace them with <span> elements, removing the href attribute
  doc.css('a').each do |a|
    # Create a new <span> element
    span = Nokogiri::XML::Node.new('span', doc)
    
    a.children.each { |child| span.add_child(child.clone) }
    
    # Replace the <a> element with the <span> element
    a.replace(span)
  end

  doc.to_html

end