Given that markdown-it supports custom containers (https://github.com/markdown-it/markdown-it-container), I think you could add some generic containers that user will customize in userstyle.css: For Example:
In general we want plugins to work outside the box, so we’d need to provide some default CSS too.
Sure. I think we could use the blockquotes style but with different colors. Or we could make something similar to admonitions in AsciiDoc (Redirect Notice).
@desk7 there was a feature request not long ago:
As mentioned in the ticket, it isn’t a problem to add the module for admonition support, but rather to develop or create CSS that works with it. As far as I could see the module only references CSS, but does not provide it. So someone would have to create the css for these classes and add them to Joplin.
Sorry. I didn’t notice.
Are there some requirements to get the proper css? I mean - in addition to a style appropriate for the type of block.
@tessus @laurent
I could prepare the css for some admonition blocks but I’d like to know what library would you implement: that one proposed by me is a simple div while that one proposed in github is more customizable (I definitely prefer the second https://squidfunk.github.io/mkdocs-material/extensions/admonition/)
Yes, this is the module I’ve been talking about. It does not provide any css. At least I couldn’t see and rendering of css, only html.
That is why the css has to be added to Joplin, but I do not know how and where. I guess this has to be done for all themes. Also, I do not know, if this css is added via a file in MdToHtml/rules or somewhere else.
I’m sure @laurent can give you some idea where to start.
I don’t know a lot about Joplin and it’s code - but to get a view as in https://squidfunk.github.io/mkdocs-material/extensions/admonition/ it should be possible to use attached CSS. Beaware it requires loading of “Material Icons” font from https://material.io/resources/icons/?style=baseline. It can either be collected online or included in the source-code for Joplin for local use. https://google.github.io/material-design-icons/#icon-font-for-the-web
admonition.css (4.7 KB)
I’m trying to move from Boostnote right now and found the use of Admonitions very handy - it would be awesome if we, with our combined forces, could make this happen.
Nope, the requirement for the Material icon set is a non-starter. At least for me, but I suspect Laurent feels the same way. As mentioned before, I do not make any decisions, Laurent does.
Maybe there are Fontawesome capabilites that could be used? I'd love to see such a feature in Joplin. If anybody could tell me what icons are needed, I would even generate them in vector format myself (any free license of your choice).
Hi,
Admonition is a very cool feature. It's very sade that's not supported by Joplin.
There is a VSCode plug-in developped by jebbs who supports this md extension. CSS for admonitions are enable on the github repo : GitHub - qjebbs/vscode-markdown-extended: Extended syntaxes to built-in markdown & What you see is what you get exporter.
Found this Joplin Plugin... Can't find it on this discourse board but it's available in Joplin plugins search.
maxnegro/joplin-plugin-admonition: Joplin markdown plugin for custom containers
I added title emoji icons to my userstyle.css as following:
/* Admonition Plugin Title Icons */
div.admonition.abstract p.admonition-title::before {
content: "≣ ";
}
div.admonition.note p.admonition-title::before {
content: "🖋 ";
}
div.admonition.info p.admonition-title::before {
content: "ℹ️ ";
}
div.admonition.tip p.admonition-title::before {
content: "🔥 ";
}
div.admonition.success p.admonition-title::before {
content: "✅ ";
}
div.admonition.question p.admonition-title::before {
content: "❓ ";
}
div.admonition.warning p.admonition-title::before {
content: "⚠️ ";
}
div.admonition.failure p.admonition-title::before {
content: "❌ ";
}
div.admonition.danger p.admonition-title::before {
content: "⚡️ ";
}
div.admonition.bug p.admonition-title::before {
content: "🕷 ";
}
div.admonition.example p.admonition-title::before {
content: "☞ ";
}
div.admonition.quote p.admonition-title::before {
content: "❞ ";
}
I like this plugin, and used a similar idea using emoji; for example:
abstract :eyeglasses:
bug :bug:
danger :zap:
example :beginner:
failure :bomb:
info :information_source:
note :memo:
question :grey_question:
quote :black_nib:
success :white_check_mark:
tip :paperclip:
warning :warning:
Then using autokey (or autohotkey, etc) to insert a fenced block for admonitions, using shortcuts: adabstract, adbug, addanger, etc, like so:
!!! abstract :eyeglasses:
!!!
Just leaving the title and content to be inserted.
@lukasl welcome to the forum.
That's a nice find. Myself and others have suggested this in the past.
Thanks for posting the link and the icon CSS!
Thank you. I've been lurking here for a while. Love Joplin and it's customization abilities!
my preview only displays 150 of the 750 github emoticons although I can see them all in my browser.
Using either of the userstyle.css left most icons unrendered. So I substiuted 6 safe emoticons that did render because they are more likely to be supported by limited fonts, and copied them from the emoticon 'preview' into the css. Sadly bold emoticons are harder to see but it worked and they are in color here. Using a mouse for the bug is the worst substitution.
/* Admonition Plugin Title Icons */
div.admonition.abstract p.admonition-title::before {
content: "≣ ";
}
div.admonition.note p.admonition-title::before {
content: "
";
}
div.admonition.info p.admonition-title::before {
content: "
";
}
div.admonition.tip p.admonition-title::before {
content: "
";
}
div.admonition.success p.admonition-title::before {
content: "
";
}
div.admonition.question p.admonition-title::before {
content: "
";
}
div.admonition.warning p.admonition-title::before {
content: "
";
}
div.admonition.failure p.admonition-title::before {
content: "
";
}
div.admonition.danger p.admonition-title::before {
content: "
";
}
div.admonition.bug p.admonition-title::before {
content: "
";
}
div.admonition.example p.admonition-title::before {
content: "
";
}
div.admonition.quote p.admonition-title::before {
content: "❞ ";
}
