Open Maxim-Mazurok opened 10 months ago
Ended up doing this:
import { dynamicImport } from 'tsimportlib';
// ...
.use(markdownItAnchor, {
slugify: (
(await dynamicImport(
'@sindresorhus/slugify',
module
)) as typeof import('@sindresorhus/slugify')
).default,
})
works for now
Hello, I'm running into this same issue, may I please ask where did you insert this code to make colons translate properly?
Thank you
Hello, I'm running into this same issue, may I please ask where did you insert this code to make colons translate properly?
Thank you
As mentioned in the linked issue you can replace .use(markdownItAnchor)
in https://github.com/gc-da11yn/gc-da11yn.github.io/blob/92cb188c48c571fdf4295013763dfb02f180c353/.eleventy.js#L15C34-L15C56 with the code above. dynamicImport
part is to make ESM module work inside of CommonJS code, you likely will need it as well from this package: https://www.npmjs.com/package/tsimportlib Alternatively use previous major version of slugify which supports CJS, hope this helps, cheers!
Thank you for your response,
I've tried using this method and I keep running into the following error:
"[11ty] Eleventy CLI Fatal Error: (more in DEBUG output) [11ty] 1. Error in your Eleventy config file '.eleventy.js'. (via EleventyConfigError) [11ty] 2. Cannot use import statement outside a module (via SyntaxError)"
I've made sure to install tsimportlib and import it at the top, here is how I wrote the configuration:
const markdownIt = require('markdown-it');
const markdownItAnchor = require('markdown-it-anchor');
const markdownItAttrs = require('markdown-it-attrs');
const { EleventyHtmlBasePlugin } = require('@11ty/eleventy');
const { stripHtml } = require('string-strip-html');
import { dynamicImport } from 'tsimportlib';
module.exports = function(eleventyConfig) {
let markdownItOptions = {
html: true, // you can include HTML tags
};
async function configureMarkdown() {
const slugifyModule = await dynamicImport('@sindresorhus/slugify', module);
const slugify = slugifyModule.default;
eleventyConfig.setLibrary(
'md',
markdownIt(markdownItOptions)
.use(markdownItAnchor, { slugify })
.use(markdownItAttrs)
);
}
Note: I had to put everything inside of an async function because having 'await' in the code was giving me an error otherwise.
I will keep troubleshooting but I wanted to share in case I'm missing something obvious,
Thank you
It looks like your project uses require
isntead of import
, so you need to use const { dynamicImport } = require('tsimportlib');
It's working now, thank you! :)
I'm going to leave the snippet that worked for me for anyone who stumbles with the same issue:
const { dynamicImport } = require('tsimportlib');
module.exports = function (eleventyConfig) {
let markdownItOptions = {
html: true,
};
const md = markdownIt(markdownItOptions).use(markdownItAttrs);
eleventyConfig.setLibrary("md", md);
dynamicImport('@sindresorhus/slugify', module)
.then((module) => {
const slugify = module.default;
md.use(markdownItAnchor, { slugify });
})
.catch((err) => {
console.error('Error importing slugify:', err);
});
I have the following markdown header:
## Step 4: Activate Data Filter
It getsid="step-4%3A-activate-data-filter"
In VS Code recommendation doesn't include colon:
But even if I add a color - it doesn't work. It has to be url-encoded, which will make my markdown unreadable.
Just some feedback, I will be looking for an option to customize slug generation now, hope this helps to make it better, cheers!