Add admonitions plus autolink and sub/superscript markdown extensions
!!! note/warning/tip/... blocks (mdit-py-plugins admon) render as lightweight callouts: accent bar + faint wash in the blockquote idiom, recolored per type (tip green, warning pink/red via --admonition-color), rounded and softly shadowed in the summer theme. Also enabled gfm_autolink (bare URLs) and H~2~O / x^2^ sub/superscripts.
This commit is contained in:
@@ -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
|
on every page, otherwise browsers fall back to the build's
|
||||||
`/favicon.ico` by convention.
|
`/favicon.ico` by convention.
|
||||||
- `markdown.py` — markdown-it-py renderer (html passthrough + attrs,
|
- `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
|
image rule: relative srcs resolve against the page path; an image
|
||||||
standing alone in its paragraph becomes a figure (captioned when
|
standing alone in its paragraph becomes a figure (captioned when
|
||||||
titled), while inline-with-text images and raw <img> HTML stay plain.
|
titled), while inline-with-text images and raw <img> HTML stay plain.
|
||||||
|
|||||||
@@ -541,6 +541,42 @@ blockquote p {
|
|||||||
margin: 0;
|
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 {
|
pre {
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
padding: 0.5rem 0.8rem;
|
padding: 0.5rem 0.8rem;
|
||||||
|
|||||||
+12
-2
@@ -2,9 +2,11 @@
|
|||||||
|
|
||||||
Raw HTML (including inline scripts) is passed through unfiltered: the
|
Raw HTML (including inline scripts) is passed through unfiltered: the
|
||||||
single author is trusted. Extensions: tables and strikethrough (from 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
|
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
|
markdown-it's typographer is enabled, so body text gets SmartyPants-style
|
||||||
replacements: straight quotes become curly, ``--`` / ``---`` become en / em
|
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 import MarkdownIt
|
||||||
from markdown_it.common.utils import escapeHtml
|
from markdown_it.common.utils import escapeHtml
|
||||||
from markdown_it.renderer import RendererHTML
|
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.attrs import attrs_plugin
|
||||||
from mdit_py_plugins.deflist import deflist_plugin
|
from mdit_py_plugins.deflist import deflist_plugin
|
||||||
from mdit_py_plugins.footnote import footnote_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 mdit_py_plugins.tasklists import tasklists_plugin
|
||||||
from pygments import highlight
|
from pygments import highlight
|
||||||
from pygments.formatters import HtmlFormatter
|
from pygments.formatters import HtmlFormatter
|
||||||
@@ -135,9 +141,13 @@ md = (
|
|||||||
},
|
},
|
||||||
)
|
)
|
||||||
.use(attrs_plugin)
|
.use(attrs_plugin)
|
||||||
|
.use(admon_plugin)
|
||||||
.use(footnote_plugin)
|
.use(footnote_plugin)
|
||||||
.use(deflist_plugin)
|
.use(deflist_plugin)
|
||||||
.use(tasklists_plugin, enabled=True)
|
.use(tasklists_plugin, enabled=True)
|
||||||
|
.use(gfm_autolink_plugin)
|
||||||
|
.use(sub_plugin)
|
||||||
|
.use(superscript_plugin)
|
||||||
)
|
)
|
||||||
md.add_render_rule("image", _image_rule)
|
md.add_render_rule("image", _image_rule)
|
||||||
md.core.ruler.push("unwrap_lone_figures", _unwrap_lone_figures)
|
md.core.ruler.push("unwrap_lone_figures", _unwrap_lone_figures)
|
||||||
|
|||||||
@@ -199,6 +199,12 @@ blockquote {
|
|||||||
padding-bottom: 0.25rem;
|
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
|
/* Code rests on a shaded leaf panel, keeping the base light syntax
|
||||||
palette. */
|
palette. */
|
||||||
pre {
|
pre {
|
||||||
|
|||||||
Reference in New Issue
Block a user