Last active
November 2, 2022 23:26
-
-
Save aras-p/5e9633b35e89538bfa61f7c71f6a404d to your computer and use it in GitHub Desktop.
Markdeep Admonition style blocks?
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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