admonitions

[abotzki]

Hi all,

does anyone have a suggestion how you could create the admonitions which are available in mkdocs in Liascript?
https://squidfunk.github.io/mkdocs-material/reference/admonitions/#admonition-icons-octicons

I thought about a combination of the blockquotes or the code blocks with icons from awesome fonts.

Thanks for your feedback!

[andre-dietrich]

Hi @abotzki ... I tried your idea out ... basically this can be done like in the following example. Only some CSS is required, these can then be attached to any block ...

<!--

@style
.admonition {
    padding: 15px 20px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.05);
    position: relative;
    line-height: 1.4;
}
.admonition::before {
    margin-left: -5rem;
}
.admonition.note {
    color: #31708f;
    background-color: #d9edf7;
    border-left: 5px solid #31708f;
}
.admonition.warning {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-left: 5px solid #8a6d3b;
}
.admonition.danger {
    color: #a94442;
    background-color: #f2dede;
    border-left: 5px solid #a94442;
}
.admonition-title {
    font-weight: bold;
    margin-bottom: 10px;
}
@end


@admonition: @admonition_(@uid,@0,@1)

@admonition_: <script modify="false">
  setTimeout(() => {
    const parent = document.getElementById('admon-@0').parentElement.parentElement.parentElement.parentElement;

    parent.classList.add("admonition");
    parent.classList.add("@1");

  }, 100);
  `LIASCRIPT: <div class="admonition-title" id="admon-@0">@2</div>`
  </script>

-->

# Admonition

<!-- class="admonition note" -->
> <!-- class="admonition-title" --> This is a test
>
> Foo
> bar
> sadsfasfd

---

> @admonition(warning,This is a test)
>
> Here is a script used, which identifies the parent blockquote
> and attaches the required class names...

---

> @admonition(danger,This is a test)
>
> Same as above ...

---

If nothing works, you can also directly use HTML

<section class="admonition note">
<h5 class="admonition-title">NOTE</h5>
This is a note admonition
</section>

You can try this out here in the LiveEditor

Unfortunately, I could not find the CSS file of MkDocs on a CDN, I found this one:

https://www.jsdelivr.com/package/npm/marked-admonition-extension

This can be imported like this, only by linking the CSS file ... The previous commands can be applied similarly. With the additional style I tried to reset the tiny font-size to the one used in LiaScript.

<!--
link: https://cdn.jsdelivr.net/npm/[email protected]/dist/index.min.css

@style
.admonition {
    font-size: initial !important;
}
@end
-->

# Admonition 2

<div class="admonition admonition-info">
<p class="admonition-title">Publish ESM and CJS in a single package</p>

In the past decade, due to the lack of a standard module system of `JavaScript`, __CommonJS__ (a.k.a the <code>require(&#39;xxx&#39;)</code> and `module.exports` syntax) has been the way how Node.js and NPM packages work. Until 2015, when ECMAScript modules finally show up as the standard solution, the community start migrating to native ESM gradually.
</div>

For completeness, here is the link to the LiveEditor