segmentio / evergreen

🌲 Evergreen React UI Framework by Segment
https://evergreen.segment.com
MIT License
12.39k stars 832 forks source link

Style for code blocks? #1482

Closed kevinburkesegment closed 2 years ago

kevinburkesegment commented 2 years ago

I need to display a code block and did not find anything in Components, also if I just try adding <pre><code>blah blah...</code></pre> it shows up as plain Courier New.

kevinburkesegment commented 2 years ago

For example, Bootstrap has this (not trying to pick on them or compare, just to demonstrate what I'm looking for): https://getbootstrap.com/docs/5.2/content/reboot/#code-blocks

brandongregoryscott commented 2 years ago

We actually do have a <Code> component! It's documented in the Foundations > Typography section of the site. Looks like it only renders as a single line right now - not sure exactly how much content you're looking to put in it, but that could be a limitation.

Edit: I think you can get a multiline codeblock by making it a Paragraph (optionally with an explicit width, otherwise it stretches to 100% of the container):

    <Code is={Paragraph} size={500} width={500}>
    {`const {
    alertDescription,
    alertTitle,
    children,
    intent,
    onClick,
    onConfirm,
    ...restProps
} = props;`}
    </Code>

image