Formatting callout

Good afternoon!
Tell me, who knows how to wrap multi-line text (several paragraphs) in callouts?
As an example,

- first line
Second line, narration
- third line

Manually arranging tags is the only way?
To get this result:

[!quote]- Quotes
><div align=“justify” style="border: 2px solid #A0CAA6; padding: 5px 10px 5px 10px; font-style: italic; color: #A0CAA6 ”>Enter text</div><br>
><div align=“justify” style="border: 2px solid #A0CAA6; padding: 5px 10px 5px 10px; font-style: italic; color: #A0CAA6 ”><p>- first line</p>
><p>second line, narration</p>
><p> - third line</p></div>.
> [!quote]- Quotes
> - first line 
>   Second line, narration
> - third line

Obsidian does not support using Markdown formatting or blank lines inside of HTML tags.

Search for the forum for CSS and callout.

Wrong. I need to insert the text into the div with the formatting I described, only the text can consist of several paragraphs

What did I do wrong? I like to learn from mistakes. What could I have done better? Here’s my reasoning:

  • Markdown inside HTML is not rendered as Markdown (see above)
  • It’s easy to style callouts with CSS (see above)
  • Obsidian Flavored Markdown supports CommonMark.
  • Example 307 in CommonMark’s specs shows how list items can have multiple lines.
  • And I tested my solution, before posting it.

This how the same Markdown looks with some custom CSS:

This is the CSS:

.callout[data-callout="quote"] {
	--callout-color: #A0CAA6;
	background-color: transparent;
	border: 2px solid #A0CAA6;
	padding: 5px 10px 5px 10px;
	font-style: italic;
	color: #A0CAA6;
}

In the Forum you’ll find plenty examples how to choose a better selector. This one overwrites all quote-callouts.

EDIT: Add CSS

1 Like

Could you post a sketch, how the result should look like?

Your CSS not working for me

I need a view like this


Just how to determine where the various quotes are and where are just quotes with a few paragraphs - I don’t know

Can you share a screen shot of the Source View?

Do you use other CSS snippets?

Do you use default theme or something else?

Thanks, now I understand. I hope this is getting closer:

.callout[data-callout="quote"] li {
	--callout-color: #A0CAA6;
	background-color: transparent;
	border: 2px solid #A0CAA6;
	padding: 5px 10px 5px 10px;
	margin: .5em 0;
	font-style: italic;
	color: #A0CAA6;
}

.callout[data-callout="quote"] li .list-bullet:after {
	display: none;
}

This example …

> [!quote]- Цитаты
> - first line 
>   Second line, narration
> - third line

… is rendered in Reading View like this:

Still this snippet has no effect for me. Ok, I will format manually as before. Sorry for wasting your time

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.