Eleventy plugin to process Markdown files with Remark
npm install @fec/eleventy-plugin-remark> Eleventy plugin to process Markdown files with Remark
With @fec/eleventy-plugin-remark you can transpile the Markdown of your Eleventy site with Remark. You can also use Remark plugins.
Made by 👨💻Florian Eckerstorfer in beautiful 🎡 Vienna, Europe.
1. Installation
2. Configuration
3. Code of Conduct
4. Contributing
5. Changelog
6. License
You need to install eleventy-plugin-remark with NPM and it requires at least Node 16.x.
``bash`
npm install -D @fec/eleventy-plugin-remark
> ⚠️ Since v3.0.0 eleventy-plugin-remark supports ESM and it should be possible to use recent versions of remark. However, please remember that Eleventy does not fully support ESM yet. See the Eleventy ESM Support project for their progress.
If you do not need ESM support yet you can still use eleventy-plugin-remark v2.x. Here are a couple of Remark/Rehype packages and the last version that works with Eleventy:
`
remark ^13.0.0
rehype-stringify ^8.0.0
remark-rehype ^8.1.0
remark-html ^13.0.1
To activate @fec/eleventy-plugin-remark you call addPlugin() on eleventyConfig, like this:
`js
// .eleventy.js
const eleventyRemark = require('@fec/eleventy-plugin-remark');
module.exports = (eleventyConfig) => {
eleventyConfig.addPlugin(eleventyRemark);
return {};
};
`
If you want to add custom Remark plugins, use the plugins option.
Signatures
- plugins: [
-
`js
const emoji = require('remark-emoji');
eleventyConfig.addPlugin(eleventyRemark, {
plugins: [
emoji,
require('remark-emoji'),
'remark-emoji',
{
plugin: emoji,
},
{
plugin: 'remark-emoji',
options: {
padSpaceAfter: true,
emoticon: true,
},
},
],
});
`
#### enableRehype (defaults to true)
If true the plugins remark-rehype and rehype-stringify are added to the processor. Set enableRehype to false if you want either not use remark-rehype and rehype-stringify at all or if you want to call these plugins with custom options. For example, to enable HTML inside your Markdown you need to use rehype-raw:
`
eleventyConfig.addPlugin(eleventyRemark, {
enableRehype: false,
plugins: [
{
plugin: remarkRehype,
options: { allowDangerousHtml: true }
},
rehypeRaw,
rehypeStringify
],
});
eleventy-plugin-remark passes Eleventy supplied data to remark. Plugins can use this data in their Markdown processing. For example, the following plugin access the date of the current page:
`js
import { visit } from 'unist-util-visit';
export default function myRemarkPlugin() {
const eleventy = this.data().eleventy;
return (tree) => {
visit(tree, (node) => {
console.log('date', eleventy.page.date);
});
};
}
`
See CODE_OF_CONDUCT
To contribute to eleventy-plugin-remark, follow these steps:
1. Fork this repository.
2. Create a branch: git checkout -b .npm install
3. Install dependencies:
4. Make your changes (and don't forget to update the tests)
5. Don't forgot to run the tests:
6. Commit your changes:
7. Push to the original branch:
8. Create the pull request.
Alternatively see the GitHub documentation on creating a pull request.
- #148 Update dependencies (by Porges)
- #149 Execute unit and integration tests on Node 18, 19 and 20
- New minimum Node version is 16.x
- #101 Create processor for each render to allow per-page data
- #100 Pass Eleventy Data to Remark
- #87 Upgrade to latest remark (with support for ESM) (by j-f1)
- Update dependencies
- Add official support for Node 16.x and Node 17.x
- #60 Update .npmignore
- #61 Add Node 15.x to CI test matrix
- #62 Update Rollup config: update externals, explicitly set default export
- #58 Update dependencies
- #59 Add option to enable rehype (defaults to true`)
- #55 Use rehype-stringify instead of remark-html to convert to HTML
- Update dependencies
- #35 Add support for plugin options (by byoigres)
- Update dependencies
- Minimum Node version is now 10.x
- Update README and links in package.json
- Initial release
This project is licenses under the MIT License.