Customise the rendering component

[AaronLayton]

I am using mdx-bundler and previously I was picking up on <pre> tag and replacing that with my own custom <SyntaxHighter />. In my component I am doing a few extra effects that help with styling, code copying etc.

Is there a way to customise the rendered output element so I can decorate it with my own container styles instead of the 3 dots in the top left?

[pomber]

You can change the styles using CSS. For example you could hide the dots with:

.ch-frame-button {
  border-color: #5c5c5c !important;
  background-color: #535353 !important;
}

You can't customize the HTML. I may add a "copy" button soon, what other things are you trying to add?

[AaronLayton]

Thanks for the quick reply @pomber

I would like to decorate the components with custom container code. With mdx-bundler you create a file like the below where you can intercept built in html tags or pick up custom components and lazy load them in.

export const MdxComponents = {
  pre: SyntaxHighlighter,
  code: ({ children }: { children: React.ReactNode }) => {
    return (
      <code
        className={clsx(
          "px-2 py-0.5 inline-block text-base font-mono rounded-md",
          "bg-gray-900/90 text-gray-200 hover:text-black",
          "dark:bg-gray-700/60 dark:text-gray-300 dark:hover:text-white"
        )}
      >
        {children}
      </code>
    );
  },
  Tweet: FakeTweet,
  GradientText,
  RainbowText,
  Sandpack,
  default: ({ children }: { children: React.ReactNode }) => {
    return { children };
  },
};

My previous solution was to pick up the <pre /> tag, or even <code/> and I could pass the props to my own custom SyntaxHighlighter component.

My thinking here would be to do something like this

export const MdxComponents = {
  hike: ({ children }: { children: React.ReactNode }) => {
    return (
      <div className={...myStyles}
      >
        <CH.hike {...children}/>
        <button>Buy me a coffee</button>
      </div >
    );
  },

  miniframe: ({ children }: { children: React.ReactNode }) => {
    return (
      <div className={...myCustomBrowserFrame}
      >
        <div>My Windows styled browser window buttons</div>
        <CH.preview{...children}/>
      </div >
    );
  },

  default: ({ children }: { children: React.ReactNode }) => {
    return { children };
  },
};

I guess most of what I am saying above, could* be built in to

     // ...
     // somewhere on your bundler configuration:
     {
       loader: "@mdx-js/loader",
       options: {
            remarkPlugins: [[remarkCodeHike, { 
               theme,
               miniframeDecorator: ({children}) => (<div>{children}</div>)
            }]],
       },
     },
...

[AaronLayton]

@pomber any thoughts on this? I would love to use my own custom wrapper, happy to help out to code this in as a PR providing the base code is extensible enough

[pomber]

Some features would break by adding custom wrappers. The element tree isn't very flexible right now.

If you have specific things you want to add with your custom wrapper, let me know, it may be possible to add those things as features.