Code block and showing examples

[mindytom]

Hi DSYS,

Got a few questions for y'all:

1. I was looking on Paste and don't see a component for a code block. Wondering if there's a recommendation on how we should put one together? My use case will only require a "Copy" functionality and don't need to display different languages. Here are 3 explorations I put together. Also, what are the recommended colors for the code text? I see green and red used differently in "Messaging > Try it out > Send an SMS".

2. For Link Shortening and Click Tracking, we're looking to show an example of what a shortened link will look like. We're thinking based on what "domain" a customer selects in the dropdown, the domain in the example will also update below. Click through this prototype to see. Do y'all have recommendation how we should display examples like this?

Thanks!
Mindy

[kate-porter]

Hey @mindytom! Thanks for these questions—answers below:

1. You are correct that there is no code block component yet, and we don't have any formal recommendation for styling in the meantime, but you can definitely build it using Paste (using Box and Text). The code block you found in Messaging is probably the most recent one, so modeling after that is a good call. I have a preference for Option 1, because that's most similar to Messaging and what we've been exploring for a Copy pattern, but I don't know enough about the product to know whether putting the code into a Disclosure is the right move for the customer or not, so that's totally your call. If you do go with Option 1, my only recommended adjustment would be to put the copy icon before the button text to align with some other recent patterns (like Data Export). In terms of syntax highlighting, I'd also recommend asking the Messaging team what they used—they are probably just using a syntax highlighting library that you could also leverage.
2. For the example, what you have here looks great! We did just redesign the "callouts" for the docs site and they look very similar to what you have here, just without the blue border and using blue text instead of black:
   
   So, if you wanted to align with this styling, that's also an option. But like I said, your design looks good, too.

Let me know if you have questions on any of this!