Skip to content

Instantly share code, notes, and snippets.

@aras-p
Last active November 2, 2022 23:26
Show Gist options
  • Save aras-p/5e9633b35e89538bfa61f7c71f6a404d to your computer and use it in GitHub Desktop.
Save aras-p/5e9633b35e89538bfa61f7c71f6a404d to your computer and use it in GitHub Desktop.
Markdeep Admonition style blocks?
Right now I can do this in Markdeep source:
------------------
Just a test paragraph, move along...
<div class="note">
Just a note. Don't mind me.
</div>
<div class="warn">
Something sneaky, *maybe*?
</div>
<div class="error">
**Here!** Watch out, something bad.
</div>
------------------
And use a custom CSS with rules like:
------------------
.note, .warn, .error {
position: relative;
margin: 1em 0;
padding: .4rem 0.8rem;
border-radius: .2rem;
}
.note {
border-left: 1.2rem solid rgba(68,138,255,.4);
background-color: rgba(68,138,255,.15);
}
.warn {
border-left: 1.2rem solid rgba(0,191,165,.4);
background-color: rgba(0,191,165,.15);
}
.error {
border-left: 1.2rem solid rgba(255,23,68,.4);
background-color: rgba(255,23,68,.15);
}
------------------
And that kind of produces what I want. Would be sweet to use Admonition style syntax that would be built-in
(see https://squidfunk.github.io/mkdocs-material/extensions/admonition/ or https://pythonhosted.org/Markdown/extensions/admonition.html),
e.g.:
!!! note
Just a note. Don't mind me.
!!! warn
Something sneaky, *maybe*?
!!! error
**Here!** Watch out, something bad.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment