Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add a "code block" component?

See original GitHub issue

Feature request

Is your feature request related to a problem? Please describe.

It would be nice to have a component for longer blocks of code. It seems like right now there is only <Code> which is for code mixed inline with text.

Describe the solution you’d like

Having something very similar to how the code blocks in the docs are formatted would be amazing.

Issue Analytics

State:
Created 3 years ago
Reactions:9
Comments:9 (1 by maintainers)

Top GitHub Comments

3reactions

dodascommented, Dec 10, 2020

What are the requirements for such component?

You can achieve the following result by adding 2 style props, although we could make a variant out of it: Screenshot 2020-12-10 at 01 30 29

cc @ianstormtaylor @HarishJangra @gamegee @rohmanhm @yatish27

1reaction

jswentcommented, Sep 15, 2022

Are you sure? I just clicked on it and it seems to be working. Here’s a permalink: https://github.com/chakra-ui/chakra-ui-docs/blob/9f1b555eb87b82437f2754342b1d7cab5d8bf5e3/src/components/mdx-components/codeblock/codeblock.tsx

Top Results From Across the Web

How to Add Syntax Highlighting to a Code Block in React

This article will show you how to use react-syntax-highlighter to highlight code blocks in React. You will create a code block component ......

rajinwonderland/react-code-blocks - GitHub

Initially, this started as a small project looking to modify Atlaskit's Code Block component to support more languages (i.e graphql , reasonml ,...

How to Build a Code Block Web Component

Build a code block web component that can be used on any page, is compatible with different frameworks and can be used by...

react-code-blocks - CodeSandbox

react-code-blocks. React components for rendering code snippets with syntax highlighting. code-snippet. highlightjs. remark. prismicjs. react-code-blocks.

Code block - Examples - Components

A code block highlights an entire block of code and keeps the formatting.