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>.
harr
2
> [!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
harr
4
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
harr
5
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
harr
7
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
system
Closed
9
This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.