Gathering detailed insights and metrics for @e11ty/eleventy-plugin-markdown
Gathering detailed insights and metrics for @e11ty/eleventy-plugin-markdown
Gathering detailed insights and metrics for @e11ty/eleventy-plugin-markdown
Gathering detailed insights and metrics for @e11ty/eleventy-plugin-markdown
Collection of plugins and various modules I use for 11ty
npm install @e11ty/eleventy-plugin-markdown
Typescript
Module System
Node Version
NPM Version
TypeScript (92.55%)
JavaScript (5.22%)
Liquid (1.12%)
Shell (0.84%)
HTML (0.27%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
7 Stars
58 Commits
1 Forks
1 Watchers
1 Branches
2 Contributors
Updated on May 26, 2025
Latest Version
0.0.6
Package Id
@e11ty/eleventy-plugin-markdown@0.0.6
Unpacked Size
83.25 kB
Size
23.29 kB
File Count
6
NPM Version
10.9.2
Node Version
22.14.0
Published on
May 01, 2025
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
1
An Eleventy markdown plugin enhancement around markdown-it. This plugin includes necessary plugins and some normalization logic for building static sites in 11ty.
NOTE This enhancement plugin is tailored to my specific development approach and to some degree that tooling I use and maintain. Universal usage might require adjustments in certain contexts due to its custom nature.
The enhancement comes with markdown-it installed as a dependency, along with the following markdown-it plugins.
The @11ty/eleventy module is a peer and needs to be installed along side it.
1pnpm add @e11ty/eleventy-plugin-markdown -D
There is a named export of markdown
which expects the eleventyConfig
be provided. The options parameter can be used to hook into the transform cycles and is also where you can control the included plugins options. Optionally use with 11ty.ts wrapper for type completions.
1const { defineConfig } = require('11ty.ts'); // Optional 2const { markdown } = require('@e11ty/eleventy-plugin-markdown'); 3const papyrus = require('papyrus'); 4 5module.exports = defineConfig(eleventyConfig => { 6 7 const md = markdown(eleventyConfig, { 8 highlight: { 9 fence: ({ raw, language, escape }) => `<h1>${language}</h1><p>Override codeblock</p>`, 10 block: ({ raw, language, escape }) => papyrus.highlight(raw, { language }), 11 inline: ({ raw, language }) => papyrus.inline(raw, { language }) 12 }, 13 anchors: { 14 attrs: [ ['spx-node', 'spy.anchor'] ], 15 plugin: { /* plugin options */ } 16 }, 17 options: { 18 html: true, 19 linkify: true, 20 typographer: true, 21 breaks: false 22 } 23 }) 24 25});
The plugin provides a refined set of enhancements for both markdown and liquid.
Grid access is made possible using 2 character fenced markers in markdown. Occurences of ::
signal for div
and the suffixed words will be added as class names result in encapsulate content being wrapped.
Use the minimum of 3 ::
colon for open/close containers.
1:: row jc-center ai-center 2:: col-sm-6 col-md-4 3 4# Header 5 6Lorem ipsum dolor sit... 7 8:: 9:: col-6 col-md-8 10 11**bold** ipsum dolor sit... 12 13:: 14::
The resulting output of the above will generate the following markup.
1<div class="row jc-center ai-center"> 2 <div class="col-sm-6 col-md-4"> 3 <h1>Header</h1> 4 <p>Lorem ipsum dolor sit...</p> 5 </div> 6 <div class="col-6 col-md-8"> 7 <p> 8 <strong>bold</strong> Lorem ipsum dolor sit... 9 </p> 10 </div> 11</div>
Markdown codeblock regions will be passed to the highlight
property and call either block
or inline
functions when structures are encountered. Designed for usage with Papyrus.
Markdown codeblock will fire the block()
method. Papyrus determines whether to render editor or not.
1```js 2const foo = 'bar'; // Comment 3```
You can override the default code blocks to pass something more expressive than <pre>
, this can be done by using fence()
. You cannot use both fence()
and block()
, only one is possible.
1markdown(eleventyConfig, { 2 highlight: { 3 fence({ language, raw, escape }) { 4 if (language.endsWith(':foo')) { 5 return `<h1>${language}</h1>`; 6 } 7 8 return papyrus.highlight(raw, { language }); 9 } 10 } 11});
Papyrus support inline code highlighting and fires the inline()
method. Signal inline code as follows:
1`{html} <h1>HTML</h1>` 2`{js} someMethod()` 3`{liquid} {% if %}`
The single literal quotes with single whitespace to trigger inline highlighting, e.g:
{:language} code
Link anchors support scroll-spy logic. This uses the markdown-it-anchors plugin under the hood and provides an attrs
helper for assigning additional attributes to heading blocks. The existence of and anchors
array value contained in the frontmatter of a markdown page will determine whether or not anchor annotations apply.
The anchors
frontmatter data will be used to generate the markup and also applies annotation to headings.
1--- 2anchors: 3 Group Name: 4 - Some Title 5 - Another Title 6 Second Group: 7 - Foo 8 - Bar 9 - Baz 10--- 11 12# Some Title
Liquid output tags accept an | anchor
filter which result in the href
value being hash id.
Syntax | Example |
---|---|
Liquid | <a href="{{ href | anchor }}" spx-node="spy.href">Link<a> |
Markup | <a href="#some-title" spx-node="spy.href">Link<a> |
The heading values provided to frontmatter anchors
will be matched and result in the following.
Syntax | Example |
---|---|
Markdown | # Some Title |
Markup | <h1 id="some-title" tabindex="-1" spx-node="spy.anchor">Some Title</h1> |
Control the class=""
values of blockquote occurrences within markdown. Whenever a blockquote begins with a colon prefixed value of :class
it will be applied as the class name.
The :class
annotation in markdown will simply add the class name/s.
1> :class note fs-xl 2> This will be a note blockquote 3 4--- 5 6> :class warn fw-bold 7> This will be a warning blockquote
An additional | md
Liquid filter is made available. This md
filter will apply inline rendering.
Filter | Example |
---|---|
md | {{ value | md }} |
No vulnerabilities found.
No security vulnerabilities found.