Colon in header doesn't work

[Maxim-Mazurok]

I have the following markdown header:
## Step 4: Activate Data Filter
It gets id="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!

[Maxim-Mazurok]

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

[acev0010]

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

[Maxim-Mazurok]

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!

[acev0010]

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

[Maxim-Mazurok]

It looks like your project uses require isntead of import, so you need to use const { dynamicImport } = require('tsimportlib');

[acev0010]

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);
    });