Inside The Box
Matching Markdown Containers and modern CSS features.
published
After setting up our first Markdown syntax extentions in part one of this series, we now gonna add containers to give us the oportunity to add some extra emphasis on blocks.
Installation
Install the required packages:
npm install --save-dev markdown-it-containerConfiguration
Add to eleventy.config.js:
["note", "success", "warning", "danger"].map((classname) => {
eleventyConfig.amendLibrary("md", (mdLib) =>
mdLib.use(markdownItContainer, classname, {
render: function (tokens, idx) {
if (tokens[idx].nesting === 1) {
return `<aside class="callout ${classname}">\n`;
} else {
return "</aside>\n";
}
},
})
);
});Usage Examples
:::note
A container with the class note
:::other types
Styling
Creating containers like this is a great excuse to use the relative color syntax in our stylesheet. We start really simple for a start: taking a base color --callout-color and making it transparent and using it for the border and background.
.callout {
--color-callout: white;
background-color: rgb(from var(--color-callout) r g b / 0.3);
border: 1px solid rgb(from var(--color-callout) r g b / 0.5);
box-shadow: inset 0 0 10px rgb(from var(--color-callout) r g b / 0.3);
border-radius: 0.5em;
padding: 0.5em 1em;
margin-block-end: 1em;
box-shadow: inset 0 0 30px #000;
}
.note {
--color-callout: white;
}
.success {
--color-callout: green;
}
.warning {
--color-callout: darkorange;
}
.danger {
--color-callout: red;
}