Text Formatting - Code Block #2135
-
|
Hi team, I need to design a modified version of this page in the console just wondering if there is a way to stylise some part of a paragraph like a code or code block?
|
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 8 replies
-
|
Hey @kasey-seo - there is no Paste component or pattern around this yet, but you can still achieve this look using Box and Text. In fact, we do it quite frequently on the Paste docs site (here's an example). I noticed your original post in Slack also asked about how to do this in Figma. Unfortunately, the answer is that it'll have to be a little hacky—there's not a great way to style text inline when it's got a custom background color, border radius, etc. What'll you basically need to do is style the code snippets separately from the paragraph text, and then drop the code snippets on top of the paragraph text to create the effect. Here's a quick vid that explains what I mean. I hope that helps! Let us know if you have any other questions on this. |
Beta Was this translation helpful? Give feedback.
-
|
Hey @bhamtil-twilio - just wanted to followup here that we've actually pulled Code Block up in priority and will be releasing it as a component in Paste this sprint! |
Beta Was this translation helpful? Give feedback.
-
|
Woohoo, that's great news! Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
Hi @shleewhite and @katieporter, does the Code Block component automatically format and color the code content inside it? Or are we meant to do that ourselves? From what I understand current code blocks use a third-party tool to "prettify" the code inside it automatically. |
Beta Was this translation helpful? Give feedback.
-
|
For blocks of code, we will likely draw the line at syntax highlighting the code that is provided to us. We generally don't touch the content that is passed to a component, because it's not ours to touch. We don't know and can't infer what you want it to be, so it's best to leave that up to the author to give you the full flexibility and control over your content. |
Beta Was this translation helpful? Give feedback.
-
|
Incredibly excited that this is being prioritized! Code snippets feature heavily in our onboarding experiences but today don't support syntax hilighting or long line wrapping (see screenshot). One thing that would be really useful for us for cURL snippets is the ability to toggle to display Auth Token. Is that something you'd consider adding to the roadmap? |
Beta Was this translation helpful? Give feedback.
-
|
Code block and inline Code are now available in Paste. |
Beta Was this translation helpful? Give feedback.
Hey @kasey-seo - there is no Paste component or pattern around this yet, but you can still achieve this look using Box and Text. In fact, we do it quite frequently on the Paste docs site (here's an example).
I noticed your original post in Slack also asked about how to do this in Figma. Unfortunately, the answer is that it'll have to be a little hacky—there's not a great way to style text inline when it's got a custom background color, border radius, etc. What'll you basically need to do is style the code snippets separately from the paragraph text, and then drop the code snippets on top of the paragraph text to create the effect. Here's a quick vid that explains what I mean.
I hope that …