Support Admonition callouts (#166) (closes #88)

assets/js/callouts.js

@@ -0,0 +1,6 @@
+const addCollapsibleCallouts = () => {
+    const collapsibleCallouts = document.querySelectorAll("blockquote.callout-collapsible");
+    collapsibleCallouts.forEach(el => el.addEventListener('click', event => {
+        event.currentTarget.classList.toggle("callout-collapsed");
+    }));
+}

assets/js/search.js

@@ -45,6 +45,7 @@ const removeMarkdown = (
       .replace(/(`{3,})(.*?)\1/gm, "$2")
       .replace(/`(.+?)`/g, "$1")
       .replace(/\n{2,}/g, "\n\n")
+      .replace(/\[![a-zA-Z]+\][-\+]? /g, "")
   } catch (e) {
     console.error(e)
     return markdown

assets/styles/_callouts.scss

@@ -0,0 +1,374 @@
+:root {
+    --callout-summary: #00b0ff;
+    --callout-summary-accent: #7fd7ff;
+    --callout-bug: #f50057;
+    --callout-bug-accent: #ff7aa9;
+    --callout-danger: #ff1744;
+    --callout-danger-accent: #ff8aa1;
+    --callout-example: #7c4dff;
+    --callout-example-accent: #bda5ff;
+    --callout-fail: #ff5252;
+    --callout-fail-accent: #ffa8a8;
+    --callout-info: #00b8d4;
+    --callout-info-accent: #69ebff;
+    --callout-note: #448aff;
+    --callout-note-accent: #a1c4ff;
+    --callout-question: #64dd17;
+    --callout-question-accent: #b0f286;
+    --callout-quote: #9e9e9e;
+    --callout-quote-accent: #cecece;
+    --callout-done: #00c853;
+    --callout-done-accent: #63ffa4;
+    --callout-important: #00bfa5;
+    --callout-important-accent: #5fffe9;
+    --callout-warning: #ff9100;
+    --callout-warning-accent: #ffc87f;
+}
+
+[saved-theme=dark] {
+    --callout-summary: #00b0ff !important;
+    --callout-summary-accent: #00587f !important;
+    --callout-bug: #f50057 !important;
+    --callout-bug-accent: #7a002b !important;
+    --callout-danger: #ff1744 !important;
+    --callout-danger-accent: #8b001a !important;
+    --callout-example: #7c4dff !important;
+    --callout-example-accent: #2b00a6 !important;
+    --callout-fail: #ff5252 !important;
+    --callout-fail-accent: #a80000 !important;
+    --callout-info: #00b8d4 !important;
+    --callout-info-accent: #005c6a !important;
+    --callout-note: #448aff !important;
+    --callout-note-accent: #003ca1 !important;
+    --callout-question: #64dd17 !important;
+    --callout-question-accent: #006429 !important;
+    --callout-quote: #9e9e9e !important;
+    --callout-quote-accent: #4f4f4f !important;
+    --callout-done: #00c853 !important;
+    --callout-done-accent: #006429 !important;
+    --callout-important: #00bfa5 !important;
+    --callout-important-accent: #005f52 !important;
+    --callout-warning: #ff9100 !important;
+    --callout-warning-accent: #7f4800 !important;
+}
+
+blockquote.callout-collapsible {
+    cursor: pointer;
+}
+blockquote.callout-collapsed {
+    border-bottom-right-radius: 5px !important;
+    padding-bottom: 0 !important;
+}
+blockquote.callout-collapsible::after {
+    content: '-';
+    display: inline-block;
+    height: 24px;
+    width: 18px;
+    margin: 0;
+    position: absolute;
+    right: 6px;
+    top: 0;
+    font-size: 175%;
+    font-weight: bolder;
+    font-family: 'Courier New', Courier, monospace;
+}
+blockquote.callout-collapsed::after {
+    content: '+' !important;
+}
+blockquote.callout-collapsed > *:not(:first-child) {
+    display: none !important;
+}
+
+blockquote[class*="-callout"] {
+    margin-right: 0;
+    border-radius: 5px;
+    position: relative;
+    padding-left: 0 !important;
+    padding-bottom: 0.25em;
+    color: var(--dark);
+    background-color: var(--outlinegray);
+}
+blockquote[class*="-callout"] > p {
+    border-top-right-radius: 5px;
+    padding-left: 1em;
+    padding-right: 1em;
+    color: var(--dark);
+    background-color: var(--outlinegray);
+}
+blockquote[class*="-callout"] > p:first-child::after {
+    display: inline-block;
+    height: 24px;
+    width: 18px;
+    margin: 3px 0;
+    position: absolute;
+    left: 6px;
+    top: 0;
+}
+blockquote[class*="-callout"] > p:first-child {
+    font-size: 125%;
+    font-weight: bold;
+    padding-left: 30px;
+    border-bottom-right-radius: 5px;
+}
+
+blockquote.abstract-callout,
+blockquote.summary-callout,
+blockquote.tldr-callout {
+    border-left: 6px solid var(--callout-summary) !important;
+}
+blockquote.abstract-callout > p:first-child,
+blockquote.summary-callout > p:first-child,
+blockquote.tldr-callout > p:first-child {
+    background-color: var(--callout-summary-accent) !important;
+}
+blockquote.abstract-callout > p:first-child::after,
+blockquote.summary-callout > p:first-child::after,
+blockquote.tldr-callout > p:first-child::after {
+    content: '';
+    -webkit-mask: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='book' class='svg-inline--callout-fa fa-book fa-w-14' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='currentColor' d='M448 360V24c0-13.3-10.7-24-24-24H96C43 0 0 43 0 96v320c0 53 43 96 96 96h328c13.3 0 24-10.7 24-24v-16c0-7.5-3.5-14.3-8.9-18.7-4.2-15.4-4.2-59.3 0-74.7 5.4-4.3 8.9-11.1 8.9-18.6zM128 134c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm0 64c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm253.4 250H96c-17.7 0-32-14.3-32-32 0-17.6 14.4-32 32-32h285.4c-1.9 17.1-1.9 46.9 0 64z'%3E%3C/path%3E%3C/svg%3E");
+    mask: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='book' class='svg-inline--callout-fa fa-book fa-w-14' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='currentColor' d='M448 360V24c0-13.3-10.7-24-24-24H96C43 0 0 43 0 96v320c0 53 43 96 96 96h328c13.3 0 24-10.7 24-24v-16c0-7.5-3.5-14.3-8.9-18.7-4.2-15.4-4.2-59.3 0-74.7 5.4-4.3 8.9-11.1 8.9-18.6zM128 134c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm0 64c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm253.4 250H96c-17.7 0-32-14.3-32-32 0-17.6 14.4-32 32-32h285.4c-1.9 17.1-1.9 46.9 0 64z'%3E%3C/path%3E%3C/svg%3E");
+    background-color: var(--callout-summary) !important;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+}
+blockquote.bug-callout {
+    border-left: 6px solid var(--callout-bug) !important;
+}
+blockquote.bug-callout > p:first-child {
+    background-color: var(--callout-bug-accent) !important;
+}
+blockquote.bug-callout > p:first-child::after {
+    content: '';
+    -webkit-mask: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='bug' class='svg-inline--callout-fa fa-bug fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M511.988 288.9c-.478 17.43-15.217 31.1-32.653 31.1H424v16c0 21.864-4.882 42.584-13.6 61.145l60.228 60.228c12.496 12.497 12.496 32.758 0 45.255-12.498 12.497-32.759 12.496-45.256 0l-54.736-54.736C345.886 467.965 314.351 480 280 480V236c0-6.627-5.373-12-12-12h-24c-6.627 0-12 5.373-12 12v244c-34.351 0-65.886-12.035-90.636-32.108l-54.736 54.736c-12.498 12.497-32.759 12.496-45.256 0-12.496-12.497-12.496-32.758 0-45.255l60.228-60.228C92.882 378.584 88 357.864 88 336v-16H32.666C15.23 320 .491 306.33.013 288.9-.484 270.816 14.028 256 32 256h56v-58.745l-46.628-46.628c-12.496-12.497-12.496-32.758 0-45.255 12.498-12.497 32.758-12.497 45.256 0L141.255 160h229.489l54.627-54.627c12.498-12.497 32.758-12.497 45.256 0 12.496 12.497 12.496 32.758 0 45.255L424 197.255V256h56c17.972 0 32.484 14.816 31.988 32.9zM257 0c-61.856 0-112 50.144-112 112h224C369 50.144 318.856 0 257 0z'%3E%3C/path%3E%3C/svg%3E");
+    mask: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='bug' class='svg-inline--callout-fa fa-bug fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M511.988 288.9c-.478 17.43-15.217 31.1-32.653 31.1H424v16c0 21.864-4.882 42.584-13.6 61.145l60.228 60.228c12.496 12.497 12.496 32.758 0 45.255-12.498 12.497-32.759 12.496-45.256 0l-54.736-54.736C345.886 467.965 314.351 480 280 480V236c0-6.627-5.373-12-12-12h-24c-6.627 0-12 5.373-12 12v244c-34.351 0-65.886-12.035-90.636-32.108l-54.736 54.736c-12.498 12.497-32.759 12.496-45.256 0-12.496-12.497-12.496-32.758 0-45.255l60.228-60.228C92.882 378.584 88 357.864 88 336v-16H32.666C15.23 320 .491 306.33.013 288.9-.484 270.816 14.028 256 32 256h56v-58.745l-46.628-46.628c-12.496-12.497-12.496-32.758 0-45.255 12.498-12.497 32.758-12.497 45.256 0L141.255 160h229.489l54.627-54.627c12.498-12.497 32.758-12.497 45.256 0 12.496 12.497 12.496 32.758 0 45.255L424 197.255V256h56c17.972 0 32.484 14.816 31.988 32.9zM257 0c-61.856 0-112 50.144-112 112h224C369 50.144 318.856 0 257 0z'%3E%3C/path%3E%3C/svg%3E");
+    background-color: var(--callout-bug) !important;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+}
+blockquote.danger-callout,
+blockquote.error-callout {
+    border-left: 6px solid var(--callout-danger) !important;
+}
+blockquote.danger-callout > p:first-child,
+blockquote.error-callout > p:first-child {
+    background-color: var(--callout-danger-accent) !important;
+}
+blockquote.danger-callout > p:first-child::after,
+blockquote.error-callout > p:first-child::after {
+    content: '';
+    -webkit-mask: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='bolt' class='svg-inline--callout-fa fa-bolt fa-w-10' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='currentColor' d='M296 160H180.6l42.6-129.8C227.2 15 215.7 0 200 0H56C44 0 33.8 8.9 32.2 20.8l-32 240C-1.7 275.2 9.5 288 24 288h118.7L96.6 482.5c-3.6 15.2 8 29.5 23.3 29.5 8.4 0 16.4-4.4 20.8-12l176-304c9.3-15.9-2.2-36-20.7-36z'%3E%3C/path%3E%3C/svg%3E");
+    mask: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='bolt' class='svg-inline--callout-fa fa-bolt fa-w-10' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='currentColor' d='M296 160H180.6l42.6-129.8C227.2 15 215.7 0 200 0H56C44 0 33.8 8.9 32.2 20.8l-32 240C-1.7 275.2 9.5 288 24 288h118.7L96.6 482.5c-3.6 15.2 8 29.5 23.3 29.5 8.4 0 16.4-4.4 20.8-12l176-304c9.3-15.9-2.2-36-20.7-36z'%3E%3C/path%3E%3C/svg%3E");
+    background-color: var(--callout-danger) !important;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+}
+blockquote.example-callout {
+    border-left: 6px solid var(--callout-example) !important;
+}
+blockquote.example-callout > p:first-child {
+    background-color: var(--callout-example-accent) !important;
+}
+blockquote.example-callout > p:first-child::after {
+    content: '';
+    -webkit-mask: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='list-ol' class='svg-inline--callout-fa fa-list-ol fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M61.77 401l17.5-20.15a19.92 19.92 0 0 0 5.07-14.19v-3.31C84.34 356 80.5 352 73 352H16a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h22.83a157.41 157.41 0 0 0-11 12.31l-5.61 7c-4 5.07-5.25 10.13-2.8 14.88l1.05 1.93c3 5.76 6.29 7.88 12.25 7.88h4.73c10.33 0 15.94 2.44 15.94 9.09 0 4.72-4.2 8.22-14.36 8.22a41.54 41.54 0 0 1-15.47-3.12c-6.49-3.88-11.74-3.5-15.6 3.12l-5.59 9.31c-3.72 6.13-3.19 11.72 2.63 15.94 7.71 4.69 20.38 9.44 37 9.44 34.16 0 48.5-22.75 48.5-44.12-.03-14.38-9.12-29.76-28.73-34.88zM496 224H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM16 160h64a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8H64V40a8 8 0 0 0-8-8H32a8 8 0 0 0-7.14 4.42l-8 16A8 8 0 0 0 24 64h8v64H16a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8zm-3.91 160H80a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8H41.32c3.29-10.29 48.34-18.68 48.34-56.44 0-29.06-25-39.56-44.47-39.56-21.36 0-33.8 10-40.46 18.75-4.37 5.59-3 10.84 2.8 15.37l8.58 6.88c5.61 4.56 11 2.47 16.12-2.44a13.44 13.44 0 0 1 9.46-3.84c3.33 0 9.28 1.56 9.28 8.75C51 248.19 0 257.31 0 304.59v4C0 316 5.08 320 12.09 320z'%3E%3C/path%3E%3C/svg%3E");
+    mask: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='list-ol' class='svg-inline--callout-fa fa-list-ol fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M61.77 401l17.5-20.15a19.92 19.92 0 0 0 5.07-14.19v-3.31C84.34 356 80.5 352 73 352H16a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h22.83a157.41 157.41 0 0 0-11 12.31l-5.61 7c-4 5.07-5.25 10.13-2.8 14.88l1.05 1.93c3 5.76 6.29 7.88 12.25 7.88h4.73c10.33 0 15.94 2.44 15.94 9.09 0 4.72-4.2 8.22-14.36 8.22a41.54 41.54 0 0 1-15.47-3.12c-6.49-3.88-11.74-3.5-15.6 3.12l-5.59 9.31c-3.72 6.13-3.19 11.72 2.63 15.94 7.71 4.69 20.38 9.44 37 9.44 34.16 0 48.5-22.75 48.5-44.12-.03-14.38-9.12-29.76-28.73-34.88zM496 224H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM16 160h64a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8H64V40a8 8 0 0 0-8-8H32a8 8 0 0 0-7.14 4.42l-8 16A8 8 0 0 0 24 64h8v64H16a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8zm-3.91 160H80a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8H41.32c3.29-10.29 48.34-18.68 48.34-56.44 0-29.06-25-39.56-44.47-39.56-21.36 0-33.8 10-40.46 18.75-4.37 5.59-3 10.84 2.8 15.37l8.58 6.88c5.61 4.56 11 2.47 16.12-2.44a13.44 13.44 0 0 1 9.46-3.84c3.33 0 9.28 1.56 9.28 8.75C51 248.19 0 257.31 0 304.59v4C0 316 5.08 320 12.09 320z'%3E%3C/path%3E%3C/svg%3E");
+    background-color: var(--callout-example) !important;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+}
+blockquote.failure-callout,
+blockquote.fail-callout,
+blockquote.missing-callout {
+    border-left: 6px solid var(--callout-fail) !important;
+}
+blockquote.failure-callout > p:first-child,
+blockquote.fail-callout > p:first-child,
+blockquote.missing-callout > p:first-child {
+    background-color: var(--callout-fail-accent) !important;
+}
+blockquote.failure-callout > p:first-child::after,
+blockquote.fail-callout > p:first-child::after,
+blockquote.missing-callout > p:first-child::after {
+    content: '';
+    -webkit-mask: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='times-circle' class='svg-inline--callout-fa fa-times-circle fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z'%3E%3C/path%3E%3C/svg%3E");
+    mask: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='times-circle' class='svg-inline--callout-fa fa-times-circle fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z'%3E%3C/path%3E%3C/svg%3E");
+    background-color: var(--callout-fail) !important;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+}
+blockquote.info-callout,
+blockquote.todo-callout {
+    border-left: 6px solid var(--callout-info) !important;
+}
+blockquote.info-callout > p:first-child,
+blockquote.todo-callout > p:first-child {
+    background-color: var(--callout-info-accent) !important;
+}
+blockquote.info-callout > p:first-child::after,
+blockquote.todo-callout > p:first-child::after {
+    content: '';
+    -webkit-mask: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='info-circle' class='svg-inline--callout-fa fa-info-circle fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' 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 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z'%3E%3C/path%3E%3C/svg%3E");
+    mask: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='info-circle' class='svg-inline--callout-fa fa-info-circle fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' 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 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z'%3E%3C/path%3E%3C/svg%3E");
+    background-color: var(--callout-info) !important;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+}
+blockquote.note-callout {
+    border-left: 6px solid var(--callout-note) !important;
+}
+blockquote.note-callout > p:first-child {
+    background-color: var(--callout-note-accent) !important;
+}
+blockquote.note-callout > p:first-child::after {
+    content: '';
+    -webkit-mask: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='pencil-alt' class='svg-inline--callout-fa fa-pencil-alt fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z'%3E%3C/path%3E%3C/svg%3E");
+    mask: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='pencil-alt' class='svg-inline--callout-fa fa-pencil-alt fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z'%3E%3C/path%3E%3C/svg%3E");
+    background-color: var(--callout-note) !important;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+}
+blockquote.question-callout,
+blockquote.help-callout,
+blockquote.faq-callout {
+    border-left: 6px solid var(--callout-question) !important;
+}
+blockquote.question-callout > p:first-child,
+blockquote.help-callout > p:first-child,
+blockquote.faq-callout > p:first-child {
+    background-color: var(--callout-question-accent) !important;
+}
+blockquote.question-callout > p:first-child::after,
+blockquote.help-callout > p:first-child::after,
+blockquote.faq-callout > p:first-child::after {
+    content: '';
+    -webkit-mask: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='question-circle' class='svg-inline--callout-fa fa-question-circle fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z'%3E%3C/path%3E%3C/svg%3E");
+    mask: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='question-circle' class='svg-inline--callout-fa fa-question-circle fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z'%3E%3C/path%3E%3C/svg%3E");
+    background-color: var(--callout-question) !important;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+}
+blockquote.quote-callout,
+blockquote.cite-callout {
+    border-left: 6px solid var(--callout-quote) !important;
+}
+blockquote.quote-callout > p:first-child,
+blockquote.cite-callout > p:first-child {
+    background-color: var(--callout-quote-accent) !important;
+}
+blockquote.quote-callout > p:first-child::after,
+blockquote.cite-callout > p:first-child::after {
+    content: '';
+    -webkit-mask: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='quote-right' class='svg-inline--callout-fa fa-quote-right fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M464 32H336c-26.5 0-48 21.5-48 48v128c0 26.5 21.5 48 48 48h80v64c0 35.3-28.7 64-64 64h-8c-13.3 0-24 10.7-24 24v48c0 13.3 10.7 24 24 24h8c88.4 0 160-71.6 160-160V80c0-26.5-21.5-48-48-48zm-288 0H48C21.5 32 0 53.5 0 80v128c0 26.5 21.5 48 48 48h80v64c0 35.3-28.7 64-64 64h-8c-13.3 0-24 10.7-24 24v48c0 13.3 10.7 24 24 24h8c88.4 0 160-71.6 160-160V80c0-26.5-21.5-48-48-48z'%3E%3C/path%3E%3C/svg%3E");
+    mask: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='quote-right' class='svg-inline--callout-fa fa-quote-right fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M464 32H336c-26.5 0-48 21.5-48 48v128c0 26.5 21.5 48 48 48h80v64c0 35.3-28.7 64-64 64h-8c-13.3 0-24 10.7-24 24v48c0 13.3 10.7 24 24 24h8c88.4 0 160-71.6 160-160V80c0-26.5-21.5-48-48-48zm-288 0H48C21.5 32 0 53.5 0 80v128c0 26.5 21.5 48 48 48h80v64c0 35.3-28.7 64-64 64h-8c-13.3 0-24 10.7-24 24v48c0 13.3 10.7 24 24 24h8c88.4 0 160-71.6 160-160V80c0-26.5-21.5-48-48-48z'%3E%3C/path%3E%3C/svg%3E");
+    background-color: var(--callout-quote) !important;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+}
+blockquote.success-callout,
+blockquote.check-callout,
+blockquote.done-callout {
+    border-left: 6px solid var(--callout-done) !important;
+}
+blockquote.success-callout > p:first-child,
+blockquote.check-callout > p:first-child,
+blockquote.done-callout > p:first-child {
+    background-color: var(--callout-done-accent) !important;
+}
+blockquote.success-callout > p:first-child::after,
+blockquote.check-callout > p:first-child::after,
+blockquote.done-callout > p:first-child::after {
+    content: '';
+    -webkit-mask: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='check-circle' class='svg-inline--callout-fa fa-check-circle fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'%3E%3C/path%3E%3C/svg%3E");
+    mask: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='check-circle' class='svg-inline--callout-fa fa-check-circle fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'%3E%3C/path%3E%3C/svg%3E");
+    background-color: var(--callout-done) !important;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+}
+blockquote.tip-callout,
+blockquote.hint-callout,
+blockquote.important-callout {
+    border-left: 6px solid var(--callout-important) !important;
+}
+blockquote.tip-callout > p:first-child,
+blockquote.hint-callout > p:first-child,
+blockquote.important-callout > p:first-child {
+    background-color: var(--callout-important-accent) !important;
+}
+blockquote.tip-callout > p:first-child::after,
+blockquote.hint-callout > p:first-child::after,
+blockquote.important-callout > p:first-child::after {
+    content: '';
+    -webkit-mask: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='fire' class='svg-inline--callout-fa fa-fire fa-w-12' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='currentColor' d='M216 23.86c0-23.8-30.65-32.77-44.15-13.04C48 191.85 224 200 224 288c0 35.63-29.11 64.46-64.85 63.99-35.17-.45-63.15-29.77-63.15-64.94v-85.51c0-21.7-26.47-32.23-41.43-16.5C27.8 213.16 0 261.33 0 320c0 105.87 86.13 192 192 192s192-86.13 192-192c0-170.29-168-193-168-296.14z'%3E%3C/path%3E%3C/svg%3E");
+    mask: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='fire' class='svg-inline--callout-fa fa-fire fa-w-12' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='currentColor' d='M216 23.86c0-23.8-30.65-32.77-44.15-13.04C48 191.85 224 200 224 288c0 35.63-29.11 64.46-64.85 63.99-35.17-.45-63.15-29.77-63.15-64.94v-85.51c0-21.7-26.47-32.23-41.43-16.5C27.8 213.16 0 261.33 0 320c0 105.87 86.13 192 192 192s192-86.13 192-192c0-170.29-168-193-168-296.14z'%3E%3C/path%3E%3C/svg%3E");
+    background-color: var(--callout-important) !important;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+}
+blockquote.warning-callout,
+blockquote.caution-callout,
+blockquote.attention-callout {
+    border-left: 6px solid var(--callout-warning) !important;
+}
+blockquote.warning-callout > p:first-child,
+blockquote.caution-callout > p:first-child,
+blockquote.attention-callout > p:first-child {
+    background-color: var(--callout-warning-accent) !important;
+}
+blockquote.warning-callout > p:first-child::after,
+blockquote.caution-callout > p:first-child::after,
+blockquote.attention-callout > p:first-child::after {
+    content: '';
+    -webkit-mask: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='exclamation-triangle' class='svg-inline--callout-fa fa-exclamation-triangle fa-w-18' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='currentColor' d='M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'%3E%3C/path%3E%3C/svg%3E");
+    mask: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='exclamation-triangle' class='svg-inline--callout-fa fa-exclamation-triangle fa-w-18' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='currentColor' d='M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'%3E%3C/path%3E%3C/svg%3E");
+    background-color: var(--callout-warning) !important;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+}

content/_index.md

@@ -9,6 +9,7 @@ Host your second brain and [digital garden](https://jzhao.xyz/posts/networked-th
 3. Automatically generated backlinks, link previews, and local graph
 4. Built-in [[notes/CJK + Latex Support (测试) | CJK + Latex Support]]
 5. Support for both Markdown Links and Wikilinks
+6. Built-in [[notes/callouts | Callouts Support]]
 
 Check out some of the [amazing gardens that community members](notes/showcase.md) have published with Quartz or read about [why I made Quartz](notes/philosophy.md) to begin with.
 

content/notes/callouts.md

@@ -0,0 +1,97 @@
+---
+title: "Callouts"
+---
+
+## Callout support
+
+Supports built-in Callouts. See [documentation on supported types here](https://help.obsidian.md/How+to/Use+callouts#Types).
+
+## Format:
+
+```
+> [!example] Example
+> 
+> Text
+```
+
+Turns to:
+
+> [!example] Example
+>
+> Text
+
+## Collapsible Callouts:
+
+```
+> [!example]- Starts Collapsed
+> 
+> Text
+```
+
+Turns to:
+
+> [!example]- Starts Collapsed
+>
+> Text
+
+```
+> [!example]- Starts Opened
+> 
+> Text
+```
+
+Turns to:
+
+> [!example]- Starts Opened
+>
+> Text
+
+## Showcase:
+
+> [!example] example
+>
+> example
+
+> [!note] note
+>
+> note
+
+> [!abstract] abstract, summary, tldr
+>
+> abstract, summary, tldr
+
+> [!info] info, todo
+>
+> info, todo
+
+> [!tip] tip, hint, important
+>
+> tip, hint, important
+
+> [!success] success, check, done
+>
+> success, check, done
+
+> [!question] question, help, faq
+>
+> question, help, faq
+
+> [!warning] warning, caution, attention
+>
+> warning, caution, attention
+
+> [!failure] failure, fail, missing
+>
+> failure, fail, missing
+
+> [!danger] danger, error
+>
+> danger, error
+
+> [!bug] bug
+>
+> bug
+
+> [!quote] quote, cite
+>
+> quote, cite

content/notes/config.md

@@ -31,6 +31,9 @@ enableCodeBlockTitle: true
 # whether to render copy buttons for code blocks
 enableCodeBlockCopy: true 
 
+# whether to render callouts
+enableCallouts: true
+
 # whether to try to process Latex
 enableLatex: true
 

data/config.yaml

@@ -5,6 +5,7 @@ enableLinkPreview: true
 enableLatex: true
 enableCodeBlockTitle: true
 enableCodeBlockCopy: true
+enableCallouts: true
 enableSPA: true
 enableFooter: true
 enableContextualBacklinks: true

layouts/partials/head.html

@@ -29,6 +29,10 @@
   {{$scss := . | resources.ToCSS (dict "outputStyle" "compressed") }}
   {{$css = $css | append $scss}}
   {{end}}
+  {{if $.Site.Data.config.enableCallouts}}
+    {{$scss := resources.Get "styles/_callouts.scss" | resources.ToCSS (dict "outputStyle" "compressed") }}
+    {{$css = $css | append $scss}}
+  {{end}}
   {{$finalCss := $css | resources.Concat "styles.css" | resources.Fingerprint "md5" | resources.Minify  }}
   <link href="{{$finalCss.Permalink}}" rel="stylesheet" />
 
@@ -58,6 +62,11 @@
   <script src="{{$clipboard.Permalink}}"></script>
   {{ end }}
 
+  {{ if $.Site.Data.config.enableCallouts }}
+  {{ $callouts := resources.Get "js/callouts.js" | resources.Fingerprint "md5" | resources.Minify }}
+  <script src="{{$callouts.Permalink}}"></script>
+  {{ end }}
+
   <!--  Preload page vars  -->
   {{$linkIndex := resources.Get "indices/linkIndex.json" | resources.Fingerprint
   "md5" | resources.Minify | }} {{$contentIndex := resources.Get
@@ -97,6 +106,10 @@
       addTitleToCodeBlocks();
       {{ end }}
 
+      {{if $.Site.Data.config.enableCallouts -}}
+      addCollapsibleCallouts();
+      {{ end }}
+
       {{if $.Site.Data.config.enableFooter}}
       const container = document.getElementById("graph-container")
       // retry if the graph is not ready

layouts/partials/textprocessing.html

@@ -55,4 +55,37 @@
 {{/* Add jumpable anchors */}}
 {{ $content = $content | replaceRE "(<h[1-9] id=\"([^\"]+)\">)(.+)(</h[1-9]>)" `<a href="#${2}">${1}<span class="hanchor" ariaLabel="Anchor"># </span>${3}${4}</a>` }}
 
+{{/* Callouts */}}
+{{if $.Site.Data.config.enableCallouts}}
+  {{ $content = $content | replaceRE "<blockquote>" "<blockquote class=callout>" }}
+  {{ $blockquoteclasses := findRE `\[!.+\]` $content }}
+  {{ $blockquoteclasses1 := findRE "<blockquote.*?>(.|\n)*?</blockquote>" $content }}
+  {{ $blockquotetags := findRE `blockquote class=callout` $content }}
+  {{ $counter := 0 }}
+  {{ $counter1 := 0 }}
+  {{ $finder := index $blockquoteclasses1 $counter }}
+  {{range $blockquotetags}}
+    {{ $finder = index $blockquoteclasses1 $counter }}
+    {{ if (in $finder "[!") }}
+      {{ $inner := index $blockquoteclasses $counter1 }}
+      {{ if (in $finder "]-") }}
+        {{ $inner = $inner | replaceRE `\[!([a-zA-Z]+)\]` `callout-collapsible callout-collapsed ${1}`}}
+      {{ else if (in $finder "]+") }}
+        {{ $inner = $inner | replaceRE `\[!([a-zA-Z]+)\]` `callout-collapsible ${1}`}}
+      {{ else}}
+        {{ $inner = $inner | replaceRE `\[!([a-zA-Z]+)\]` `${1}` }}
+      {{ end }}
+      {{ $inner = printf "blockquote class=\"%s-callout\"" $inner}}
+      {{ $content = replace $content . $inner 1}}
+      {{ $counter1 = add $counter1 1 }}
+    {{ else }}
+      {{ $inner := print "blockquote" }}
+      {{ $content = replace $content . $inner 1}}
+    {{ end }}
+    {{ $counter = add $counter 1 }}
+  {{end}}
+  {{ $content = $content | replaceRE `\[![a-zA-Z]+\][-\+]?` "" }}
+  {{ $content = $content | replaceRE "blockquote class=callout" "blockquote" }}
+{{end}}
+
 {{ $content | safeHTML }}