-
|
I installed Eleventy SSG to write blogs. In some of my MDs, I have tables. I want smartphone users to be able to swipe tables horizontally. for that I must wrap tables in div with class name table-wrapper. and use this code in bundle.css
Now I can put HTML snippet directly in MD. But I don't want to put div in every page. Is there any way Eleventy can automatically wrap every table in that wrapper class? |
Beta Was this translation helpful? Give feedback.
Replies: 4 comments 1 reply
-
|
You could apply a transform if you want each and every HTML table to be wrapped. |
Beta Was this translation helpful? Give feedback.
-
|
Yes. Eleventy uses markdown-it under the hood. And you can use markdown-it plugins. Try the markdown-it-table-wrap plugin. Allows both wrapping of your |
Beta Was this translation helpful? Give feedback.
-
|
Thank You both for your suggestions.
Since I am on Android+termux+obsidian I may need to apply André Jaenisch's
Solution, because I can't install plugins outside of termux home.
…On Mon, Feb 2, 2026, 5:44 PM dwkns ***@***.***> wrote:
Yes.
Eleventy uses markdown-it
<https://www.11ty.dev/docs/languages/markdown/#add-your-own-plugins>
under the hood. And you can use markdown-it plugins.
Try the markdown-it-table-wrap
<https://github.com/trunkcode/markdown-it-table-wrap> plugin. Allows both
wrapping of your <table> and adding a class.
—
Reply to this email directly, view it on GitHub
<#4222 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AVTIGBV6QQ6BCUVVQU6RQVL4J45S7AVCNFSM6AAAAACTUWX6ZCVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTKNRXGIYTSMA>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
|
Beta Was this translation helpful? Give feedback.
-
|
Turns out you don't need a plugin. You can amend the table rules directly in your config. export default (eleventyConfig) => {
eleventyConfig.amendLibrary("md", (md) => {
md.renderer.rules.table_open = function () {
return '<div class=""><table class="">';
};
md.renderer.rules.table_close = function () {
return '</table></div>';
};
});
} |
Beta Was this translation helpful? Give feedback.
Turns out you don't need a plugin. You can amend the table rules directly in your config.