My style: Improving admonition + user script to fold admonitions

[vgyenge6]

Hi,

First of all, thank you for developing this plugin. Obsidian is great but doesn't provide any HTML output. Thus your plugin is a MUST!

I would like to contribute a little of my improvements for styling admonitions, and custom admonitions (as they look like in and by my Obsidian's Admonition plugin setup), extending with my user script to provide folding of the admonition content in your plugins's html output.

Put these styles' definitions into your Custom Stylesheet of this plugin. (Copy/paste from here and use your own colors and SVG icons.
Note: You need to set up the custom admonitions colors and icons first in Obsidian's Admonition plugin setup using a custom stylesheet or adding JSON definition there.)

---

/ * Callouts */

.callout[data-callout="abstract"],
.callout[data-callout="tldr"],
.callout[data-callout="hint"] {
--callout-color: 0, 191, 188;
--callout-content-background : 229, 248, 134;
}

.callout[data-callout="faq"],
.callout[data-callout="help"],
.callout[data-callout="caution"],
.callout[data-callout="attention"].,
.callout[data-callout="warning"] {
--callout-color: 236, 117, 0;
--callout-content-background: 253, 241, 229;
}

.callout[data-callout="success"],
.callout[data-callout="check"],
.callout[data-callout="done"] {
--callout-color: 8 185 78;
--callout-content-background: 230 248 237;
}

.callout[data-callout="missing"],
.callout[data-callout="bug"],
.callout[data-callout="failure"],
.callout[data-callout="danger"],
.callout[data-callout="error"] {
--callout-color: 233 49 71;
--callout-content-background: 254 234 236;
}

.callout[data-callout="example"]{
--callout-color: 139 106 240;
--callout-content-background: 241 237 253;
}

.callout[data-callout="quote"],
.callout[data-callout="cite"]{
--callout-color: 158 158 158;
--callout-content-background: 245 245 245;
}

/* custom callouts */

.callout[data-callout="info"]{
--callout-color: 199, 182, 0;
--callout-content-background:253, 251, 229;
--callout-icon: <svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="#C7B600"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"

; }

.callout[data-callout="answer"]{
--callout-color: 0, 179, 134;
--callout-content-background: 229, 247, 243;
--callout-icon: <svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="#00B386"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"

; }

.callout[data-callout="question"] {
--callout-color: 8, 109, 221;
--callout-content-background: 230 240 252;
--callout-icon: <svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="#086DDD"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"

; }

.callout[data-callout="todo"]{
--callout-color: 158, 158, 158;
--callout-content-background: 245 245 245;
--callout-icon: <svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="#9E9E9E"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"

; }

.callout[data-callout="summary"]{
--callout-color: 123, 0, 189;
--callout-content-background: 242 229 248;
/* --callout-icon: lucide-sigma; */
--callout-icon: <svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="#7B00BD"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"

; }

.callout[data-callout="important"] {
--callout-color: 236, 117, 0;
--callout-content-background: 253, 241, 229;
/* --callout-icon: lucide-alert-circle; */
--callout-icon: <svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="#EC7500"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"

; }

.callout[data-callout="tip"] {
--callout-color: 0, 191, 188;
--callout-content-background: 229, 248, 248;
/* --callout-icon: lucide-shield-alert; */
--callout-icon: <svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="#40CFCD"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"

; }

.callout[data-callout="yellow"] {
--callout-color: 192, 182, 0;
--callout-content-background: 253,251, 229;
/* --callout-icon: lucide-arrow-big-right; */
--callout-icon: <svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="#EBD700"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"

; }

.callout[data-callout="orange"] {
--callout-color: 236, 117, 0;
--callout-content-background: 253, 241,229;
/* --callout-icon: lucide-arrow-big-right; */
--callout-icon: <svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="#EC7500"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"

; }

.callout[data-callout="red"] {
--callout-color: 233, 49, 71;
--callout-content-background: 253, 234, 236;
/* --callout-icon: lucide-arrow-big-right; */
--callout-icon: <svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="#E93147"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"

; }

.callout[data-callout="turquise"] {
--callout-color: 0, 191, 188;
--callout-content-background: 229, 248, 248;
/* --callout-icon: lucide-arrow-big-right; */
--callout-icon: <svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="#EC7500"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"

; }

.callout[data-callout="purple"] {
--callout-color: 123, 0, 189;
--callout-content-background: 241, 237, 253>
/* --callout-icon: lucide-arrow-big-right; */
--callout-icon: <svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="#00BFBC"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"

; }

.callout[data-callout="blue"]{
--callout-color: 8, 109, 221;
--callout-content-background: 230, 240, 252;
/* --callout-icon: lucide-arrow-big-right; */
--callout-icon: <svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="#086DDD"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"

; }

.callout[data-callout="green"]{
--callout-color: 0, 179, 134;
--callout-content-background: 229, 247, 243;
/* --callout-icon: lucide-arrow-big-right; */
--callout-icon: <svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="#00B386"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"

; }

.callout[data-callout="grey"]{
--callout-color: 158, 158, 158;
--callout-content-background: 245 245 245;
/* --callout-icon: lucide-arrow-big-right; */
--callout-icon: <svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="#9E9E9E"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"

; }

.callout {
overflow: hidden;
/* margin: 1em 0; /
/ box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
border-radius: 4px; */
background-color: rgb(var(--callout-content-background));
padding: 4px;
margin-top: 0px;
}

.callout-title {
padding: 0;
display: flex;
align-items: center;
gap: 4px;
font-size: inherit;
line-height: 1.3em;
color: rgb(var(--callout-color));
}

.callout-icon {
flex: 0 0 auto;
display: flex;
align-self: center;
color: rgb(var(--callout-color));
}

svg.svg-icon {
height: 18px;
width: 18px;
stroke-width: 1.75px;
color: rgb(var(--callout-color));
}

.callout-fold {
display:flex;
align-items:center;
padding-right:var(--size-4-2)
}

.callout-fold .svg-icon {
transition:transform .1s ease-in-out 0s
}

.callout-fold.is-collapsed .svg-icon {
transform:rotate(-90deg)
}

.callout-title-inner {
font-weight: bold;
font-size: inherit;
line-height: 1.3em;
color: rgb(var(--callout-color));
}

.callout-content {
overflow-x: auto;
padding: 0;
background-color:rgb(var(--callout-content-background));
}

---

Write a script to fold the admonition content. It will work fork embedded admonitions too.
Create a file myscripts_js.html. You need to add (insert) this script manually into the copied and saved html.

---

<script> document.onreadystatechange = function (){ console.log(document.readyState); if (document.readyState === 'complete') { initPage(); } } function initPage(){ let e = document; setupCallouts(e); function setupCallouts(e){ e.querySelectorAll(".callout-fold").forEach((function (e) { e.addEventListener("click", (function () { var t = this.parentElement.parentElement.childNodes[1]; e.classList.toggle("is-collapsed") if (t.style.display === "none") { t.style.display = "block"; } else { t.style.display = "none"; } } )) } )) } } </script>

---

Any response is welcome if this also works for you.

[mvdkwast]

Hi @vgyenge6 ! I'm not familiar with that plugin, but happy to see that you can make admonitions that look good. The defaults that I provided are quite ugly :D

From your work we could do several things :

• provide an option to include custom JS, just like the custom CSS option, that would avoid having to modify the HTML every time.
• improve the current default CSS with your styling ? It may be a bit too long to provide as-is as a default. Maybe it should be possible to choose a theme (just brainstorming here)

[vgyenge6]

Hi,

Thanks for your answer.

My answer will be a little longer, but (I would like to little brainstorm here:)

1. I'm not familiar with that plugin:

You need not use Admonition Plugin unless you would like to change or add your own to the standard callout styles built in Obsidian.

2. The defaults that I provided ...Improve the current default CSS with your styling It may be a bit too long ?

a. You may change the admonition styling in your plugin's default to be compatible with the standard callout styles without using Admonition plugin. I provide the CSS below only for the built-in callouts in Obsidian. It is a little shorter version as I wrote above, and does not contain any additional custom admonitions and changes made.
Note: I did not try this latter standard CSS I wrote - my given above however works -, but I guess, it will render with the same look in the copied HTML as the standard callouts were made in Obsidian with the standard icons whether you set 'convert svg to bitmap' or not.
Let you give it a try.

b. see below...

3. provide an option to include custom JS, just like the custom CSS option

If you do not want to force the user to write long custom CSS into your plugin's textarea field, but more added from several CSS files, you may give the possibility to add selectable

a. more custom CSSs from a path (e.g. put in obsidian snippets directory or else that may be a cloud storage or custom server URL) given where the CSS files reside. Likely, you need to insert them into the head section either
a.1. generated the <style>...</style> ... <style>...</style> etc. or
a.2.

<link rel="stylesheet" type="text/css" href="URL\mystyle1.css">
<link rel="stylesheet" type="text/css" href="URL\mystyle2.css">

b. It can be similar to adding custom JS files.
Likely, you need to insert them into the head section either
b.1. generated the <script>...</script> ... <script>...</script> etc. or
b.2.

<script src="URL\myscript1.js">
<script src="URL\myscript2.js">

c. You may provide for the user to write a custom HTML file that contains all the styles and scripts in one file that
would be selectable from a path (e.g. put in the Obsidian snippets directory or else ).
Something like this

Likely, you need to insert only the styles and script content of this template HTML into the output HTML head section

Note: Momentarily I resolved a little ugly to add my script automatically generated into the output HTML, tweaking your plugin's main.js - sorry :)-
I added

var MY_SCRIPT = `
document.onreadystatechange = function (){ 
  if (document.readyState === 'complete') {
    initPage();
  }
} 
function initPage(){...

and I also added

var htmlTemplate = (stylesheet, body, title) => `<html>
<head>
  <title>${title}</title>
  <style>
    ${MERMAID_STYLESHEET}
    ${stylesheet}
  </style>
	<script>
		${MY_SCRIPT}
	</script>

---

Here is my standard callout CSS You may copy it from here and add it to your default stylesheet if you wish

/ * Callouts */

.callout[data-callout="abstract"],
.callout[data-callout="summary"],
.callout[data-callout="tldr"],
.callout[data-callout="hint"],
.callout[data-callout="important"] {
--callout-color: 0, 191, 188;
--callout-content-background : 229, 248, 134;
}
.callout[data-callout="question"],
.callout[data-callout="faq"],
.callout[data-callout="help"],
.callout[data-callout="caution"],
.callout[data-callout="attention"],
.callout[data-callout="warning"] {
--callout-color: 236, 117, 0;
--callout-content-background: 253, 241, 229;
}

.callout[data-callout="success"],
.callout[data-callout="check"],
.callout[data-callout="done"] {
--callout-color: 8 185 78;
--callout-content-background: 230 248 237;
}

.callout[data-callout="missing"],
.callout[data-callout="bug"],
.callout[data-callout="failure"],
.callout[data-callout="danger"],
.callout[data-callout="error"] {
--callout-color: 233 49 71;
--callout-content-background: 254 234 236;
}

.callout[data-callout="example"]{
--callout-color: 139 106 240;
--callout-content-background: 241 237 253;
}

.callout[data-callout="note"],
.callout[data-callout="info"],
.callout[data-callout="todo"] {
--callout-color: 8 109 221;
--callout-content-background: 230 240 252;	
}

.callout[data-callout="quote"],
.callout[data-callout="cite"]{
--callout-color: 158 158 158;
--callout-content-background: 245 245 245;
}

.callout {
overflow: hidden;
/* margin: 1em 0; /
/ box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
border-radius: 4px; */
background-color: rgb(var(--callout-content-background));
padding: 4px;
margin-top: 0px;
}

.callout-title {
padding: 0;
display: flex;
align-items: center;
gap: 4px;
font-size: inherit;
line-height: 1.3em;
color: rgb(var(--callout-color));
}

.callout-icon {
flex: 0 0 auto;
display: flex;
align-self: center;
color: rgb(var(--callout-color));
}

svg.svg-icon {
height: 18px;
width: 18px;
stroke-width: 1.75px;
color: rgb(var(--callout-color));
}

.callout-fold {
display:flex;
align-items:center;
padding-right:var(--size-4-2)
}

.callout-fold .svg-icon {
transition:transform .1s ease-in-out 0s
}

.callout-fold.is-collapsed .svg-icon {
transform:rotate(-90deg)
}

.callout-title-inner {
font-weight: bold;
font-size: inherit;
line-height: 1.3em;
color: rgb(var(--callout-color));
}

.callout-content {
overflow-x: auto;
padding: 0;
background-color:rgb(var(--callout-content-background));
}

---

Here is the script to fold the callouts. It works in case of nested admonitions or callouts too.

document.onreadystatechange = function (){ 
  if (document.readyState === 'complete') {
    initPage();
  }
} 
function initPage(){
let e = document;
setupCallouts(e);
}

function setupCallouts(e){
  e.querySelectorAll(".callout-fold").forEach((function (e)
    {
      e.addEventListener("click", (function ()
        {
          var t = this.parentElement.parentElement.childNodes[1];
          e.classList.toggle("is-collapsed")
 	  if (t.style.display === "none") {
	    t.style.display = "block";
	  } else {
	   t.style.display = "none";
	  } 
       }
       ))
    }
    ))
}

I look forward to hearing your kind opinion :)

---

Else regarding admonitions or callouts.

I found there is a problem if the source .md contained more admonitions or callouts, and I wished to copy the whole content.

In the first admonition/callout, what contains folding the

<div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"></path></svg></div>

will be rendered well.

But if the second admonition/callout also contains folding that won't be rendered. I mean, the

<div class="callout-fold">...</DIV>

will miss. I could not figure out why.

Please look into what may be the problem, and let me know about it if you find some resolution. Thank you.

---

Else regarding two of my little tweaks of your plugin' main.js

I would like to draw your kind attention here only, but I will write later two separate posts detailing the matter.

1. Tweak: replaceInternalLinks(node) --- Convert Internal Links to tag and replace .md to .html

I found a similar post #47 (comment) and I did it because I had also a similar problem. See: #62 (comment)

2. Tweak: replaceInternalTagLinks(node) --- Internal Tag Links need to be suppressed

See: #63 (comment)

Thanks for reading over my longer post.

[mvdkwast]

Hi @vgyenge6,

Very sorry for the long delay, time is unfortunately not something I have much of these days. I finally got around to giving this a try, and I have a few concerns :

• Using CSS variables would be very nice, unfortunately, it is still not supported everywhere, especially in gmail which is my main use-case.
• These seem to be the default Obsidian colors. I'm a bit reluctant to include them in this plugin as Obsidian is not open-source, and the color scheme is their artwork.

The theme picker is a very nice idea, unfortunately I don't think that I will realistically have the time to implement this soon.

Including the possibility for 1) including a custom JS script 2) including the code to do the folding would on the other hand be quite easy to do.

I'd have to think a bit more about the custom head. I guess it should rather be a custom template to make sure tags are closed.

[vgyenge6]

Thank you for reading my suggestions and for your further consideration.

See my general thanks here #62 (reply in thread)