diff --git a/AGENTS.md b/AGENTS.md index eda4943..d918d95 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -91,7 +91,8 @@ not for the public pages. See `docs/design-principles.md` for the design. on every page, otherwise browsers fall back to the build's `/favicon.ico` by convention. - `markdown.py` — markdown-it-py renderer (html passthrough + attrs, - footnote, deflist, tasklists plugins; typographer + breaks on). Custom + footnote, deflist, tasklists, admon, gfm_autolink, sub/superscript + plugins; typographer + breaks on). Custom image rule: relative srcs resolve against the page path; an image standing alone in its paragraph becomes a figure (captioned when titled), while inline-with-text images and raw HTML stay plain. diff --git a/frontend/src/assets/pagerite.css b/frontend/src/assets/pagerite.css index d99e8ab..58ecfe9 100644 --- a/frontend/src/assets/pagerite.css +++ b/frontend/src/assets/pagerite.css @@ -541,6 +541,42 @@ blockquote p { margin: 0; } +/* Admonitions (markdown !!! note/warning/...): a lightweight callout in + the blockquote idiom — accent bar and a faint wash, recolored per type. + Bottom-only margins like everything else in articles; inner paragraphs + carry no margins of their own. */ +.admonition { + margin: 0 0 1rem; + padding: 0.4rem 0.9rem; + border-left: 0.25rem solid var(--admonition-color, var(--accent)); + border-radius: 0 0.3rem 0.3rem 0; + background: color-mix(in srgb, var(--admonition-color, var(--accent)) 7%, transparent); +} + +.admonition > :last-child { + margin-bottom: 0; +} + +.admonition-title { + margin: 0 0 0.2rem; + font-weight: 600; + color: var(--admonition-color, var(--accent)); +} + +.admonition.tip, +.admonition.important, +.admonition.hint, +.admonition.success { + --admonition-color: var(--accent2); +} + +.admonition.warning, +.admonition.caution, +.admonition.danger, +.admonition.failure { + --admonition-color: var(--accent3); +} + pre { overflow-x: auto; padding: 0.5rem 0.8rem; diff --git a/pagerite/markdown.py b/pagerite/markdown.py index 01bc446..396d4f8 100644 --- a/pagerite/markdown.py +++ b/pagerite/markdown.py @@ -2,9 +2,11 @@ Raw HTML (including inline scripts) is passed through unfiltered: the single author is trusted. Extensions: tables and strikethrough (from the -"default" preset), footnotes, definition lists, task lists and +"default" preset), footnotes, definition lists, task lists, brace-attributes (`{.class width=300}` on any element, images in -particular). +particular) and admonitions (``!!! note Title`` with an indented body — +note/tip/warning/etc., the title optional). Bare URLs autolink (GFM), and +``H~2~O`` / ``x^2^`` give sub/superscripts. markdown-it's typographer is enabled, so body text gets SmartyPants-style replacements: straight quotes become curly, ``--`` / ``---`` become en / em @@ -27,9 +29,13 @@ from datetime import datetime, timedelta from markdown_it import MarkdownIt from markdown_it.common.utils import escapeHtml from markdown_it.renderer import RendererHTML +from mdit_py_plugins.admon import admon_plugin from mdit_py_plugins.attrs import attrs_plugin from mdit_py_plugins.deflist import deflist_plugin from mdit_py_plugins.footnote import footnote_plugin +from mdit_py_plugins.gfm_autolink import gfm_autolink_plugin +from mdit_py_plugins.subscript import sub_plugin +from mdit_py_plugins.superscript import superscript_plugin from mdit_py_plugins.tasklists import tasklists_plugin from pygments import highlight from pygments.formatters import HtmlFormatter @@ -135,9 +141,13 @@ md = ( }, ) .use(attrs_plugin) + .use(admon_plugin) .use(footnote_plugin) .use(deflist_plugin) .use(tasklists_plugin, enabled=True) + .use(gfm_autolink_plugin) + .use(sub_plugin) + .use(superscript_plugin) ) md.add_render_rule("image", _image_rule) md.core.ruler.push("unwrap_lone_figures", _unwrap_lone_figures) diff --git a/pagerite/themes/summer/theme.css b/pagerite/themes/summer/theme.css index 67a425b..7f207ec 100644 --- a/pagerite/themes/summer/theme.css +++ b/pagerite/themes/summer/theme.css @@ -199,6 +199,12 @@ blockquote { padding-bottom: 0.25rem; } +/* Admonitions join the rounded, softly shaded landscape elements. */ +.admonition { + border-radius: 0.6rem; + box-shadow: 0 0.2rem 0.7rem #4f913b1a; +} + /* Code rests on a shaded leaf panel, keeping the base light syntax palette. */ pre {