Default css feature not working as expected

[mtr1990]

Hi,

First of all thank you for your efforts to create this plugin.

This is my first time using this plugin. But some functions don't work like wait. Maybe my installation is missing something?

This is my usage context:

next-app-dir
next-mdx-remote
"rehype-pretty-code": "^0.10.0",

  const serialized = await serialize(fileContent, {
    parseFrontmatter: true,
    mdxOptions: {
      rehypePlugins: [
        [
          rehypePrettyCode,
          {
            theme: 'one-dark-pro',
          },
        ],
        rehypeSlug,
        [
          rehypeAutolinkHeadings,
          {
            behavior: 'wrap',
          },
        ],
      ],
    },
  });

1. Example for function Meta strings:

Classes have been added but the css is not applied

I have to add this style for the code to work:

  'span[data-line][data-highlighted-line]': {
    background: 'red',
  },

2. Example for function showLineNumbers:

No line numbers are displayed

I have to add this style for the code to work:

  code: { counterReset: 'line' },
  'code > [data-line]::before': {
    counterIncrement: 'line',
    content: 'counter(line)',
    display: 'inline-block',
    width: '1rem',
    marginRight: '2rem',
    textAlign: 'right',
    color: 'gray',
  },
  "code[data-line-numbers-max-digits='2'] > [data-line]::before": {
    width: '2rem',
  },
  "code[data-line-numbers-max-digits='3'] > [data-line]::before": {
    width: '3rem',
  },

  'code:not([data-language])': {
    background: 'red',
  },

  'span[data-line][data-highlighted-line]': {
    background: 'red',
  },

BUT

This will apply to all block code. So the showLineNumbers attribute makes no sense here because showLineNumber nature is to control a separate block of code.

3. **Highlight chars ** and Group highlighted chars by id

=> Nothing changes when i use these two functions.

---

=> Do we need to add css manually for those features I mentioned above? Or am I missing something installed?

Thanks!

[atomiks]

There is no default CSS, it's all unstyled. The attributes are logical indicators to apply the CSS as necessary. showLineNumbers is the logical attribute that allows you to only apply line numbers when that attribute exists.

[mtr1990]

Hi,

Thank you for clarifying. It saves me a lot of time.

Can you please provide examples for functions like Group highlighted chars by id

How can we make different colors like this?

[atomiks]

You can inspect the CSS in DevTools to see

[mtr1990]

Hi,

Thank you. I got it working with this:

            onVisitHighlightedChars(node, id) {
              node.properties.style = `
              color: ${{ v: 'yellow', i: 'cyan', s: 'green' }[id]};
              background: ${{ v: 'red', i: 'blue', s: 'green' }[id]};
              `;
            },

Maybe this needs updating in the docs.

Thanks for your support!