CSS Snippet for multiple Blockquote styles with syntax formatting?

[ShandeN]

Hi fellow Obsidianites!

I’m in need of some assistance from anyone who is more knowledgable than me. I have spent the past week trying to achieve this with only some [read: little] success! I’ve searched the forum for answers, and tried my hand at online tutorials… but I need help!

A shout out to @EleanorKonik – thank you for the great video How to turn your notes into published articles and books using the Obsidian app with Eleanor Konik - YouTube which sparked my imagination for possible ways to incorporate blockquotes within my workflow – it’s great to see someone else work in a similar way.

What I’m trying to achieve and why:

First, the why. I have an incredibly scattered mind, quite possibly undiagnosed ADHD (though the assessments I have taken point toward it) – nearing 40, I really should ‘possibly’ get this checked. As such, as a writer (both creative and academic) I have struggled for many years and discovering the Zettelkasten method back in 2012 really helped – but I still need to keep things in ‘boxes’ – folders work great for me as I forget to look at my tags (though I do use them also to make deeper connections) and too many notes, no matter how meaningfully connected get overlooked. The same applies to reading notes – if they are not with the original source, I forget about them – or struggle to see them in context.

It’s been an uphill struggle, but I’ve finally developed a system in recent years… it’s not perfect, but it works for me.

Focusing on curated sources – I have a Library folder with contains a subfolders for books and web articles (my two primary research sources) either saved from the web or converted from .epub to markdown. Reading, highlighting and annotations are made directly into the source document – much like one would do when reading a PDF document, but it’s all in markdown and searchable within Obsidian. I don’t have to switch between apps, worry about syncing highlights or try to remember were I read something that I haven’t yet made a note for. It’s all here (macOs and iOS) and ready to use – a nice tidy box.

The notes I create within the source function much like margin notes in a physical book (If I had the know-how I’d build a plug-in for this).

What am I trying to achieve? Multiple styles for different blockquotes per function.

• direct quotes "
• margin notes
• comments

Some Examples

Using @EleanorKonik theme Palatinate I’ve been able to Frankenstein together a “margin note” blockquote snippet to use with Minimal theme.

But this is a global change across all blockquotes – so I tried doing this.

But I don’t get the formatting in preview mode (as per the first image) I hoped for.

My question

Is it possible to create a snippet for different blockquotes that renders markdown syntax, links and tags in preview mode, and how would I go about doing this?

Grateful for your help in advance!

[EleanorKonik]

you might be able to leverage <i> to do this like @SlRvb does in their theme. I’m not skilled enough with CSS to help with that, but hopefully they get this ping and come to the rescue!

[mnvwvnm]

I think that inside HTML you need to write in HTML code, not markdown syntax.
Something like this:

<blockquote>
	<h1> The first principle of Entitativity </h1>
	<p> To think together we must <b>learn</b> together in close physical proximity </p><br>
	<p><b>Source: </b><a href="Teste#^ee5655" class="internal-link">Teste</a></p><br>
	<a href="#margin-note" class="tag">#margin-note</a>
</blockquote>

But this is very limited. You might want to try the “Admonition” plugin…

[ShandeN]

Thank you for the suggestion – you are correct, HTML code is far too limited, and as much as I like the Admonition plugin I’m not sure how I could change it’s appearance to wrap a box around my text.

The closest possible solution I came across can be found here: Blockquotes with different border/background colors - Help - Obsidian Forum

blockquote.red { border-color:#f00; background-color:#f001; }
blockquote.green { border-color:#0f0; background-color:#0f01; }
blockquote.blue { border-color:#00f; background-color:#00f1; }
blockquote.magenta { border-color:#f0f; background-color:#f0f1; }
blockquote.cyan { border-color:#0ff; background-color:#0ff1; }
blockquote.yellow { border-color:#ff0; background-color:#ff01; }
blockquote.pink { border-color:#f9f; background-color:#f9f1; }

Where there are different styles applied to the blockquote – this leads me to suspect something similar could be achieved with the right technical knowledge… but I don’t know enough about CSS to know for sure.

[ShandeN]

Thank you for the lead… I’ve had a look at the CSS for the theme by @SlRvb to see if I could piece together a solution – nothing has jumped out at me so far though, apart from defining setting functions for blockquote.marginnote h1, blockquote.marginnote links and blockquote.marginnote tags possibly?

I’ll play with it some more to see if I can dig up anything else…

[mnvwvnm]

I don’t use Admonition but I think that it’s more easy to configure by CSS to work as you want than by blockquote classes. (One of the advantages is that you can use the markdown syntax…)
You can configure each admonition type by css to had the desired appearance. For example (for types ‘note’ and ‘quote’):

.admonition-note {
	border: solid 1px gray !important;
	border-radius: 5px !important;
	box-shadow: none !important;
}

.admonition-quote {
	border: solid 1px red !important;
	border-radius: 5px !important;
	box-shadow: none !important;
}

See the plugin documentation, in particular the “Customization” info:

GitHub - javalent/admonitions: Adds admonition block-styled content to...

[ShandeN]

Thank you @mnvwvnm , I’ll take a closer look. Much appreciated!

[ShandeN]

@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

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 and hopefully someone with the knowledge with help refine it to be more elegant.

[mnvwvnm]

Hi, great “play”
Some observations:

1. When you use .tag[href="#margin-note"], .markdown-preview-view blockquote, this affects all blockquotes (not only the parent that contains .tag[href="#margin-note"]). I’m an amateur in CSS, but I think that is not possible to select the parent of an element that contains the a specific expression).
   If this (the fact that affects all blockquotes) is not a problem for you, then you can use only this:

.markdown-preview-view blockquote {
	border: 3px solid;
	border-color: var(--accent-middle) !important;
	border-radius: 8px 8px 8px 8px;
	font-size: 15px;
	line-height: 1.5em;
	margin: 10px 10px;
	padding-top: 10px;
	padding-bottom: 15px;
  }

2. To hide the text of the tag “#margin-note” you can use only this:

.tag[href="#margin-note"] {
	display: none;
  }

[ShandeN]

@mnvwvnm thank you for the helpful tip! Might indeed to a simpler solution