bright icon indicating copy to clipboard operation
bright copied to clipboard

Impossible to style the <pre > element

Open mehdibha opened this issue 1 year ago • 1 comments

I wanted to reduce the padding for <pre>, this didn't work for me

<Code
     {...props}
     extensions={[
       {
         name: "pre",
         Pre: (props: BrightProps) => (
           <Code.Pre style={{ border : "5px solid red" }} className="my-32 ring-8" {...props} />
         ),
       },
     ]}
/>

Also this

<Code
     {...props}
     name: "pre",
     Pre={(props: BrightProps) => (
           <Code.Pre style={{ border : "5px solid red" }} className="my-32 ring-8" {...props} />
     )}
/>

mehdibha avatar Apr 20 '24 09:04 mehdibha

Quick walkaround for those who are stuck

<Code
      {...props}
      extensions={[
        {
          name: "pre",
          Pre: (props: BrightProps) => (
            <div className="[&>pre]:!py-1">
              <Code.Pre
                {...props}
              />
            </div>
          ),
        },
      ]}
    />

mehdibha avatar Apr 20 '24 09:04 mehdibha