Admonitions avec Mkdocs Material

Admonitions de base

note: Note

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.
abstract: Abstract

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.
info: Info

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.
tip: Tip

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.
success: Success

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.
question: Question

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.
warning: Warning

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.
failure: Failure

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.
danger: Danger

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.
bug: Bug

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.
example: Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.
quote: Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.

Admonitions personnalisées

savoir

Savoir

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.

Code

Crédit: https://ens-fr.gitlab.io/mkdocs/recettes_2/#creer-ses-propres-admonitions

@keyframes heart {
  0%,
  40%,
  80%,
  100% {
    transform: scale(1);
  }

  20%,
  60% {
    transform: scale(1.1);
  }
}

:root {
  --md-admonition-icon--savoir: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z"/></svg>');
}

.md-typeset .admonition.savoir,
.md-typeset details.savoir {
  border-color: rgb(219, 16, 16);
}

.md-typeset .savoir > .admonition-title,
.md-typeset .savoir > summary {
  background-color: rgba(185, 27, 101, 0.1);
  border-color: rgb(219, 16, 16);
}

.md-typeset .savoir > .admonition-title::before,
.md-typeset .savoir > summary::before {
  background-color: rgb(219, 16, 16);
  animation: heart 1000ms infinite;
  -webkit-mask-image: var(--md-admonition-icon--savoir);
  mask-image: var(--md-admonition-icon--savoir);
}

interrogation

Interrogation

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.

Code

Crédit: https://fabricenativel.github.io

:root {
  --md-admonition-icon--interrogation: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm107.244-255.2c0 67.052-72.421 68.084-72.421 92.863V300c0 6.627-5.373 12-12 12h-45.647c-6.627 0-12-5.373-12-12v-8.659c0-35.745 27.1-50.034 47.579-61.516 17.561-9.845 28.324-16.541 28.324-29.579 0-17.246-21.999-28.693-39.784-28.693-23.189 0-33.894 10.977-48.942 29.969-4.057 5.12-11.46 6.071-16.666 2.124l-27.824-21.098c-5.107-3.872-6.251-11.066-2.644-16.363C184.846 131.491 214.94 112 261.794 112c49.071 0 101.45 38.304 101.45 88.8zM298 368c0 23.159-18.841 42-42 42s-42-18.841-42-42 18.841-42 42-42 42 18.841 42 42z"/></svg>');
}

.md-typeset .admonition.interrogation,
.md-typeset details.interrogation {
  border-color: rgb(96, 80, 189);
}

.md-typeset .interrogation > .admonition-title,
.md-typeset .interrogation > summary {
  background-color: rgba(96, 80, 189, 0.1);
  border-color: rgb(96, 80, 189);
}

.md-typeset .interrogation > .admonition-title::before,
.md-typeset .interrogation > summary::before {
  background-color: rgb(96, 80, 189);
  -webkit-mask-image: var(--md-admonition-icon--interrogation);
  mask-image: var(--md-admonition-icon--interrogation);
}

exercice

Exercice

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.

Code

Crédit: https://fabricenativel.github.io

:root {
  --md-admonition-icon--exercice: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 16.47V7.39l-6 4.54M2.22 9.19a.858.858 0 0 1-.02-1.15l1.2-1.11c.2-.18.69-.26 1.05 0l3.42 2.61 7.93-7.25c.32-.32.87-.45 1.5-.12l4 1.91c.36.21.7.54.7 1.15v13.5c0 .4-.29.83-.6 1l-4.4 2.1c-.32.13-.92.01-1.13-.2l-8.02-7.3-3.4 2.6c-.38.26-.85.19-1.05 0l-1.2-1.1c-.32-.33-.28-.87.05-1.2l3-2.7"/></svg>');
}

.md-typeset .admonition.exercice,
.md-typeset details.exercice {
  border-color: rgb(21, 59, 6);
}

.md-typeset .exercice > .admonition-title,
.md-typeset .exercice > summary {
  background-color: rgb(21, 59, 6, 0.15);
  border-color: rgb(21, 59, 6);
}

.md-typeset .exercice > .admonition-title::before,
.md-typeset .exercice > summary::before {
  background-color: rgb(21, 59, 6);
  -webkit-mask-image: var(--md-admonition-icon--exercice);
  mask-image: var(--md-admonition-icon--exercice);
}

lien

Lien

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.

Code

Crédit: https://fabricenativel.github.io

:root {
  --md-admonition-icon--lien: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M448 80v352c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48zm-88 16H248.029c-21.313 0-32.08 25.861-16.971 40.971l31.984 31.987L67.515 364.485c-4.686 4.686-4.686 12.284 0 16.971l31.029 31.029c4.687 4.686 12.285 4.686 16.971 0l195.526-195.526 31.988 31.991C358.058 263.977 384 253.425 384 231.979V120c0-13.255-10.745-24-24-24z"/></svg>');
}

.md-typeset .admonition.lien,
.md-typeset details.lien {
  border-color: rgb(106, 38, 122);
}

.md-typeset .lien > .admonition-title,
.md-typeset .lien > summary {
  background-color: rgba(106, 38, 122, 0.1);
  border-color: rgb(106, 38, 122);
}

.md-typeset .lien > .admonition-title::before,
.md-typeset .rappel > summary::before {
  background-color: rgb(106, 38, 122);
  -webkit-mask-image: var(--md-admonition-icon--lien);
  mask-image: var(--md-admonition-icon--lien);
}

maison

Maison

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.

Code

Crédit: https://fabricenativel.github.io

:root {
  --md-admonition-icon--maison: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M280.37 148.26 96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47 488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z"/></svg>');
}

.md-typeset .admonition.maison,
.md-typeset details.maison {
  border-color: rgb(218, 161, 75);
}

.md-typeset .maison > .admonition-title,
.md-typeset .maison > summary {
  background-color: rgba(218, 161, 75, 0.1);
  border-color: rgb(218, 161, 75);
}

.md-typeset .maison > .admonition-title::before,
.md-typeset .rappel > summary::before {
  background-color: rgb(218, 161, 75);
  -webkit-mask-image: var(--md-admonition-icon--maison);
  mask-image: var(--md-admonition-icon--maison);
}

rappel

Rappel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.

Code

Crédit: https://fabricenativel.github.io

:root {
  --md-admonition-icon--rappel: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M504 255.531c.253 136.64-111.18 248.372-247.82 248.468-59.015.042-113.223-20.53-155.822-54.911-11.077-8.94-11.905-25.541-1.839-35.607l11.267-11.267c8.609-8.609 22.353-9.551 31.891-1.984C173.062 425.135 212.781 440 256 440c101.705 0 184-82.311 184-184 0-101.705-82.311-184-184-184-48.814 0-93.149 18.969-126.068 49.932l50.754 50.754c10.08 10.08 2.941 27.314-11.313 27.314H24c-8.837 0-16-7.163-16-16V38.627c0-14.254 17.234-21.393 27.314-11.314l49.372 49.372C129.209 34.136 189.552 8 256 8c136.81 0 247.747 110.78 248 247.531zm-180.912 78.784 9.823-12.63c8.138-10.463 6.253-25.542-4.21-33.679L288 256.349V152c0-13.255-10.745-24-24-24h-16c-13.255 0-24 10.745-24 24v135.651l65.409 50.874c10.463 8.137 25.541 6.253 33.679-4.21z"/></svg>');
}

.md-typeset .admonition.rappel,
.md-typeset details.rappel {
  border-color: rgb(96, 96, 96);
}

.md-typeset .rappel > .admonition-title,
.md-typeset .rappel > summary {
  background-color: rgba(96, 96, 96, 0.1);
  border-color: rgb(96, 96, 96);
}

.md-typeset .rappel > .admonition-title::before,
.md-typeset .rappel > summary::before {
  background-color: rgb(96, 96, 96);
  -webkit-mask-image: var(--md-admonition-icon--rappel);
  mask-image: var(--md-admonition-icon--rappel);
}

retenir

Retenir

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.

Code

Crédit: https://fabricenativel.github.io

:root {
  --md-admonition-icon--retenir: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5.5L18.5 3H17v6a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V3H5m7 1v5h3V4h-3m-5 8h10a1 1 0 0 1 1 1v6H6v-6a1 1 0 0 1 1-1z"/></svg>');
}

.md-typeset .admonition.retenir,
.md-typeset details.retenir {
  border-color: rgb(155, 34, 18);
}

.md-typeset .retenir > .admonition-title,
.md-typeset .retenir > summary {
  background-color: rgb(155, 34, 18, 0.2);
  border-color: rgb(155, 34, 18);
}

.md-typeset .retenir > .admonition-title::before,
.md-typeset .retenir > summary::before {
  background-color: rgb(155, 34, 18);
  -webkit-mask-image: var(--md-admonition-icon--retenir);
  mask-image: var(--md-admonition-icon--retenir);
}

aide

Aide

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.

Code

Crédit: https://fabricenativel.github.io

:root {
  --md-admonition-icon--aide: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm173.696 119.559-63.399 63.399c-10.987-18.559-26.67-34.252-45.255-45.255l63.399-63.399a218.396 218.396 0 0 1 45.255 45.255zM256 352c-53.019 0-96-42.981-96-96s42.981-96 96-96 96 42.981 96 96-42.981 96-96 96zM127.559 82.304l63.399 63.399c-18.559 10.987-34.252 26.67-45.255 45.255l-63.399-63.399a218.372 218.372 0 0 1 45.255-45.255zM82.304 384.441l63.399-63.399c10.987 18.559 26.67 34.252 45.255 45.255l-63.399 63.399a218.396 218.396 0 0 1-45.255-45.255zm302.137 45.255-63.399-63.399c18.559-10.987 34.252-26.67 45.255-45.255l63.399 63.399a218.403 218.403 0 0 1-45.255 45.255z"/></svg>');
}

.md-typeset .admonition.aide,
.md-typeset details.aide {
  border-color: rgb(77, 146, 77);
}

.md-typeset .aide > .admonition-title,
.md-typeset .aide > summary {
  background-color: rgba(77, 146, 77, 0.2);
  border-color: rgb(77, 146, 77);
}

.md-typeset .aide > .admonition-title::before,
.md-typeset .rappel > summary::before {
  background-color: rgb(77, 146, 77);
  -webkit-mask-image: var(--md-admonition-icon--aide);
  mask-image: var(--md-admonition-icon--aide);
}

Dernière mise à jour: January 24, 2023
Créé: January 24, 2023