rehype-pretty / rehype-pretty-code

Beautiful code blocks for Markdown or MDX.
https://rehype-pretty.pages.dev
MIT License
1.05k stars 64 forks source link

Default css feature not working as expected #103

Closed mtr1990 closed 1 year ago

mtr1990 commented 1 year ago

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',
  },
Screenshot 2023-08-20 at 02 34 48

localhost_9999_api-calls_ (1)

2. Example for function showLineNumbers:

No line numbers are displayed

Screenshot 2023-08-20 at 02 37 02

localhost_9999_api-calls_

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 commented 1 year ago

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 commented 1 year ago

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?

Screenshot 2023-08-20 at 03 02 26
atomiks commented 1 year ago

You can inspect the CSS in DevTools to see

mtr1990 commented 1 year ago

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!