Adding new admonishes

[8de2fdb0]

Would be nice if new admonishes could be added by adding an icon and classes to the CSS.

I see that currently the directives are hardcoded.

I guess that would probably be a major change how this crate works.

[tommilligan]

I don't think this would be too much of a change actually - what you'd be losing is the ability to validate the directive is known. So if it was unknown (to the hardcoded list), you'd get a page render still. Then your custom CSS styles could be applied.

I think this should be introduced under a new configuration option in book.toml called something like validate_directives = false so you have to opt in to the above behaviour.

I think it would also be nice if we had some fallback CSS so that if you gave an unknown directive that didn't have a custom CSS, it wouldn't look absolutely terrible. But am not sure him much extra complexity that would add, maybe it's not worth it.

[sspaeti]

I tried to add a custom idea admonition, but without luck (always defaulted to 'note'). Are they hard-coded within MdBook maybe?

I added below to mdbook-admonish.css:

  --md-admonition-icon--idea:
    url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11 3C11 2.44772 10.5523 2 10 2C9.44771 2 9 2.44772 9 3V4C9 4.55228 9.44771 5 10 5C10.5523 5 11 4.55228 11 4V3Z' fill='#4A5568'/> <path d='M15.6568 5.75731C16.0473 5.36678 16.0473 4.73362 15.6568 4.34309C15.2663 3.95257 14.6331 3.95257 14.2426 4.34309L13.5355 5.0502C13.145 5.44072 13.145 6.07389 13.5355 6.46441C13.926 6.85494 14.5592 6.85494 14.9497 6.46441L15.6568 5.75731Z' fill='#4A5568'/> <path d='M18 10C18 10.5523 17.5523 11 17 11H16C15.4477 11 15 10.5523 15 10C15 9.44771 15.4477 9 16 9H17C17.5523 9 18 9.44771 18 10Z' fill='#4A5568'/> <path d='M5.05019 6.46443C5.44071 6.85496 6.07388 6.85496 6.4644 6.46443C6.85493 6.07391 6.85493 5.44074 6.4644 5.05022L5.7573 4.34311C5.36677 3.95259 4.73361 3.95259 4.34308 4.34311C3.95256 4.73363 3.95256 5.3668 4.34308 5.75732L5.05019 6.46443Z' fill='#4A5568'/> <path d='M5 10C5 10.5523 4.55228 11 4 11H3C2.44772 11 2 10.5523 2 10C2 9.44771 2.44772 9 3 9H4C4.55228 9 5 9.44771 5 10Z' fill='#4A5568'/> <path d='M8 16V15H12V16C12 17.1046 11.1046 18 10 18C8.89543 18 8 17.1046 8 16Z' fill='#4A5568'/> <path d='M12.0009 14C12.0155 13.6597 12.2076 13.3537 12.4768 13.1411C13.4046 12.4086 14 11.2738 14 10C14 7.79086 12.2091 6 10 6C7.79086 6 6 7.79086 6 10C6 11.2738 6.59545 12.4086 7.52319 13.1411C7.79241 13.3537 7.98451 13.6597 7.99911 14H12.0009Z' fill='#4A5568'/> </svg>");

:is(.admonition):is(.idea) {
  border-color: #ffeb3b; /* Yellow color for border */
}

:is(.idea) > :is(.admonition-title, summary) {
  background-color: rgba(255, 235, 59, 0.1); /* Light yellow background */
}

:is(.idea) > :is(.admonition-title, summary)::before {
  background-color: #ffeb3b; /* Yellow color for icon background */
  mask-image: var(--md-admonition-icon--idea);
  -webkit-mask-image: var(--md-admonition-icon--idea);
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
}

This is my markdown file:

```admonish idea "hello"
this is a test of idea admonish

That is how it looks rendered:

If I change the class within Browser Developer to idea, it seems to pick it up (it will change to yellow - the icon I could check later):

Any idea that I can prevent Mdbook from replacing my idea to note automatically?

types.rs

I see, the types are hard-coded in an enum in

mdbook-admonish/src/types.rs

Line 19 in dc219f7

pub(crate) enum Directive {

.

I guess there is no way to overwrite this via CSS, right?

Update: Workaround

I used reused tips/hints for my idea CSS:

  /* I use tips for intercepting my own idea admonish */
  --md-admonition-icon--idea:
    url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11 3C11 2.44772 10.5523 2 10 2C9.44771 2 9 2.44772 9 3V4C9 4.55228 9.44771 5 10 5C10.5523 5 11 4.55228 11 4V3Z' fill='%23f3da35'></path> <path d='M15.6568 5.75731C16.0473 5.36678 16.0473 4.73362 15.6568 4.34309C15.2663 3.95257 14.6331 3.95257 14.2426 4.34309L13.5355 5.0502C13.145 5.44072 13.145 6.07389 13.5355 6.46441C13.926 6.85494 14.5592 6.85494 14.9497 6.46441L15.6568 5.75731Z' fill='%23f3da35'></path> <path d='M18 10C18 10.5523 17.5523 11 17 11H16C15.4477 11 15 10.5523 15 10C15 9.44771 15.4477 9 16 9H17C17.5523 9 18 9.44771 18 10Z' fill='%23f3da35'></path> <path d='M5.05019 6.46443C5.44071 6.85496 6.07388 6.85496 6.4644 6.46443C6.85493 6.07391 6.85493 5.44074 6.4644 5.05022L5.7573 4.34311C5.36677 3.95259 4.73361 3.95259 4.34308 4.34311C3.95256 4.73363 3.95256 5.3668 4.34308 5.75732L5.05019 6.46443Z' fill='%23f3da35'></path> <path d='M5 10C5 10.5523 4.55228 11 4 11H3C2.44772 11 2 10.5523 2 10C2 9.44771 2.44772 9 3 9H4C4.55228 9 5 9.44771 5 10Z' fill='%23f3da35'></path> <path d='M8 16V15H12V16C12 17.1046 11.1046 18 10 18C8.89543 18 8 17.1046 8 16Z' fill='%23f3da35'></path> <path d='M12.0009 14C12.0155 13.6597 12.2076 13.3537 12.4768 13.1411C13.4046 12.4086 14 11.2738 14 10C14 7.79086 12.2091 6 10 6C7.79086 6 6 7.79086 6 10C6 11.2738 6.59545 12.4086 7.52319 13.1411C7.79241 13.3537 7.98451 13.6597 7.99911 14H12.0009Z' fill='%23f3da35'></path> </svg>");

:is(.admonition):is(.tip) {
  border-color: #ffeb3b; /* Yellow color for border */
}
:is(.tip) > :is(.admonition-title, summary) {
  background-color: rgba(255, 235, 59, 0.1); /* Light yellow background */
}

:is(.tip) > :is(.admonition-title, summary)::before {
  background-color: #ffeb3b; /* Yellow color for icon background */
  mask-image: var(--md-admonition-icon--idea);
  -webkit-mask-image: var(--md-admonition-icon--idea);
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
}

And I removed .tip and .hint from other CSS. Just in case anyone wants to do the same :)

[tommilligan]

Released in v1.15.0, please take a look and see if this covers your use cases: https://github.com/tommilligan/mdbook-admonish/releases/tag/v1.15.0