Gathering detailed insights and metrics for @e11ty/eleventy-plugin-markdown
Collection of plugins and various modules I use for 11ty
Installations
npm install @e11ty/eleventy-plugin-markdownDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS, ESM
Node Version
20.10.0
NPM Version
10.2.3
Score
51.7
Supply Chain
31.6
Quality
73.2
Maintenance
100
Vulnerability
97.6
License
Releases
Unable to fetch releases
Contributors
2
Unable to fetch Contributors
Languages
5
TypeScript
JavaScript
Liquid
Shell
HTML
TypeScript (92%)
JavaScript (5.43%)
Liquid (1.12%)
Shell (1.09%)
HTML (0.36%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
panoply
Download Statistics
Total Downloads
508
Last Day
1
Last Week
2
Last Month
25
Last Year
508
GitHub Statistics
6 Stars
50 Commits
1 Forks
1 Watchers
1 Branches
2 Contributors
Updated on Dec 18, 2024
Maintainers
1
Package Meta Information
Latest Version
0.0.4
Package Id
@e11ty/eleventy-plugin-markdown@0.0.4
Unpacked Size
66.86 kB
Size
19.06 kB
File Count
6
NPM Version
10.2.3
Node Version
20.10.0
Published on
Sep 09, 2024
Total Downloads
Cumulative downloads
Total Downloads
508
Last Day
0%
1
Compared to previous day
Last Week
-50%
2
Compared to previous week
Last Month
0%
25
Compared to previous month
Last Year
0%
508
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
@e11ty/eleventy-plugin-markdown
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.
Included
The enhancement comes with markdown-it installed as a dependency, along with the following markdown-it plugins.
Install
The @11ty/eleventy module is a peer and needs to be installed along side it.
1pnpm add @e11ty/eleventy-plugin-markdown -D
Usage
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 block: ({ raw, language, escape }) => papyrus.highlight(raw, { language }), 10 inline: ({ raw, language }) => papyrus.inline(raw, { language }) 11 }, 12 anchors: { 13 attrs: [ ['spx-node', 'spy.anchor'] ], 14 plugin: { /* plugin options */ } 15 }, 16 options: { 17 html: true, 18 linkify: true, 19 typographer: true, 20 breaks: false 21 } 22 }) 23 24});
Enhancements
The plugin provides a refined set of enhancements for both markdown and liquid.
Grid Container
Grid access is made possible using fenced containers in markdown. The grid keyword along with triple ::: markers will result in encapsulate content being wrapped.
Markdown Input
Use the minimum of 3 ::: colon for open/close containers and 4 (or more) for nesting depths.
1:::: grid row jc-center ai-center 2 3::: grid col-sm-6 col-md-4 4Lorem ipsum dolor sit... 5::: 6 7::: grid col-6 col-md-8 8Lorem ipsum dolor sit... 9::: 10 11::::
Markup Output
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 Lorem ipsum dolor sit... 4 </div> 5 <div class="col-6 col-md-8"> 6 Lorem ipsum dolor sit... 7 </div> 8</div>
Syntax Highlighting
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.
Codeblock
Markdown codeblock will fire the block() method. Papyrus determines whether to render editor or not.
1```js 2const foo = 'bar'; // Comment 3```
Inline Code
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
Anchors
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.
Frontmatter
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
Anchor Filter
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> |
Heading Annotation
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> |
Blockquote
Control the class="" values of blockquote occurrences within markdown. Whenever a blockquote begins with a colon prefixed value will be applied as the class name. For additional classes just append with space separators.
Markdown Example
The :class annotation in markdown will simply add the class name/s.
1> :note 2> This will be a note blockquote 3 4--- 5 6> :warn 7> This will be a warning blockquote
Filters
An additional | md Liquid filter is made available. This md filter will apply inline rendering.
| Filter | Example |
|---|---|
md | {{ value | md }} |
License
No vulnerabilities found.
No security vulnerabilities found.