CSS Snippet for multiple Blockquote styles with syntax formatting?

@EleanorKonik @mnvwvnm , a possible solution…

I’ve been playing around with the CSS, this article by a Roam user was a great help as he uses tags to define styling. A more granular solution with infinite applications than blockquotes alone.

After a lot of head scratching, and trial and error – I’ve come up with this snippet to style blockquotes using tags.

The snippet combines the tag and blockquote elements, but leaves global tags and blockquotes styling untouched (as far as I know). Here I have defined the tag #margin-note (it can be any tag and/or multiple tags) as a styled element with the text of the tag hidden (it is still searchable and clicking on the “MN” content element in preview will still perform a global link/search). @EleanorKonik I thought you might be particularly interested in this :smile:

The tag can be placed at the top or bottom of the blockquote.

I haven’t figured out a way to reduce the padding the tag creates… but the results are satisfactory, for my needs anyway. If anyone else can improve on the concept though, this would be welcomed!

Positioning of the tag – for better search results, the tag should also be part of the blockquote > #tag, if it’s not, you’ll just get a list of disembodied tags with no popover preview of the blockquote content.

Anyway, here is the snippet – it’s not perfect by any means – but I hope it helps or inspires others!

/* SNIPPET: TAG + BLOCKQUOTE = STYLED BLOCKQUOTES  */

/* Defines the styling of the box */

.tag[href="#margin-note"], .markdown-preview-view blockquote {
    border: 3px solid;
    border-color: var(--accent-middle) !important;
    border-left-width: 3px !important;
    border-radius: 8px 8px 8px 8px;
    font-size: 15px;
    line-height: 1.5em;
    margin: 10px 10px;
    margin-left: 10px;
    margin-right: 10px;
    padding-top: 10px;
    padding-bottom: 15px;
  }

/* Hides the text of the #tag  */
  
.tag[href="#margin-note"] {
    position: relative;
    color: transparent;
    padding-top: 0em;
    padding-bottom: 0em;
  }

/* Defines the styling of the text and tag content */
  
.tag[href="#margin-note"]:after {
  	font-family: 'Whitney-book';
  	font-weight:var(--bold-weight);
  	content: "MN";
    position: absolute;
    top: 0.40em;
    left: -4em;
    font-size: 2em;
  	color: #00D4FF;
  }
  
.tag[href="#margin-note"], p:not(:last-child) {
    padding-bottom: 0.7em`;
  }

Because I personally don’t like how the “MN” adds extra padding with the transparent colour element of the tag – an alternative look would be to remove the content element for “MN” and change the transparency of the tag to the desire color – resulting in this:

Plenty to play with :smile: and hopefully someone with the knowledge with help refine it to be more elegant.

3 Likes