Next.js Discord

Discord Forum

Shiki Quick Question: removing <pre> from codeToHTML

Answered
ᴉuɐpɹɐɐ posted this in #help-forum
Open in Discord
ᴉuɐpɹɐɐOP
One quick question: how do you remove the <pre> tag from codeToHTML from shiki ?
Answered by joulev
<pre> is pretty much part of the shiki output now, it's a black box and you are just asking for trouble when you touch it.

if you want to add a copy button for example, make a wrapping <div> and absolutely position the button inside that <div> as a sibling of <pre>
View full answer

30 Replies

averydelusionalperson
Hmm, I don't use shiki, but can't we just use .replace function?
@averydelusionalperson Hmm, I don't use shiki, but can't we just use `.replace` function?
ᴉuɐpɹɐɐOP
if we have this code <pre>...</pre> you reckon just remove the opening and closing tag?
Arinji
why do you wanna remve it btw
ᴉuɐpɹɐɐOP
so i can use my own <pre> tag
averydelusionalperson
wut?
ᴉuɐpɹɐɐOP
So i can do this
        <pre>
          <div className="text-xs opacity-40 italic">{language}</div>
          <CodeBlockAsPre <---- this uses shiki's codeToHTML()
            code={flattenedRT}
            lang={language as BundledLanguage}
            classNames={{
              pre: "typography-pre whitespace-pre relative",
              line: "block"
            }}
          />
        </pre>
if the <pre> tag is already shipped then I can't add children inside it :(
Arinji
tbh i use bright soo, no clue
if you are open to changing packages, this is my code with bright

import { Code } from "bright";

export async function CodeHTML({ node }: { node: any }) {
  const codeStrings = await Promise.all(
    node.fields["Code Blocks"].map(async (field: any) => {
      return (
        <Code
          key={field.id}
          lang={field.blockType.toLowerCase()}
          className="whitespace-break-spaces break-words w-full"
        >
          {field[field.blockType.toLowerCase()]}
        </Code>
      );
    })
  );

  return (
    <div className="w-full h-fit flex flex-col items-start ">{codeStrings}</div>
  );
}
averydelusionalperson
I'm clueless ngl, never implemeted syntax highlighting
ᴉuɐpɹɐɐOP
i like bright but theirs are hard to customize
Arinji
true
ᴉuɐpɹɐɐOP
im getting closer to what i want its just this pesky blocker
averydelusionalperson
how are you implementing it rn? can you share the code
Arinji
yea
joulev
any reasons why you absolutely need to change the pre instead of making a wrapping div?
pre is styled, it should be kept intact. use a wrapping div
you can use [&_pre]:p-6 if you want
ᴉuɐpɹɐɐOP
uhh because i set up a fallback just in case the language isn't supported and maintain consisten styling
export async function CodeBlockAsPre(
  props: {
    code: string,
    lang: BundledLanguage,
    classNames?: {
      pre?: string,
      line?: string,
    },
  }
) {
  const highlighted = await codeToHtml(props.code, {
    lang: props.lang,
    theme: "dark-plus",
    
    transformers: [
      {
        pre: (e) => {
          const properties = e?.properties
          if (properties) {
            properties['class'] = cn(properties.class, props.classNames?.pre)
          }
          e.tagName = "span"
          console.log(e)
          return e
        },
        line: (e) => {
          const properties = e?.properties
          if (properties) {
            properties['class'] = cn(properties.class, props.classNames?.line)
          }
          return e
        },
      }
    ],
  })
  return ReactHtmlParser(highlighted, {
    preprocessNodes: (e) => {
      return e
    }
  })
}


which translates simply to 
export async function CodeBlockAsPre(
  props: {
    code: string,
    lang: BundledLanguage,
  }
) {
  const highlighted = await codeToHtml(props.code, {
    lang: props.lang,
    theme: "dark-plus",
  }) // returns "<pre> ... </pre>"
  return ReactHtmlParser(highlighted)
}
@ᴉuɐpɹɐɐ uhh because i set up a fallback just in case the language isn't supported and maintain consisten styling
joulev
XY problem detected. why not set the language to plaintext if the language is not supported?
<pre> is styled and there's a reason why shiki enforces it
ᴉuɐpɹɐɐOP
ig that works but what if I want to add something insdie <pre> ?
btw, thanks for the attention, i know you'd come save me :D
@joulev you can use `[&_pre]:p-6` if you want
Arinji
you can use this to style
im not that good in selectors but im assuming this just selects the pre tag
@ᴉuɐpɹɐɐ ig that works but what if I want to add something insdie <pre> ?
joulev
<pre> is pretty much part of the shiki output now, it's a black box and you are just asking for trouble when you touch it.

if you want to add a copy button for example, make a wrapping <div> and absolutely position the button inside that <div> as a sibling of <pre>
Answer
ᴉuɐpɹɐɐOP
aahh
yes its not about styling, i dont mind.
I guess id just have to wrap the code block with another <div>