React Code Block

A simple NPM package that allows you to show a code block with some simple functionality

Select your framework

Regular

1const GroceryItem: React.FC<GroceryItemProps> = ({ item }) => {
2  return (
3    <div>
4      <h2>{item.name}</h2>
5      <p>Price: {item.price}</p>
6      <p>Quantity: {item.quantity}</p>
7    </div>
8  );
9}

With filename

awesome.tsx

1const GroceryItem: React.FC<GroceryItemProps> = ({ item }) => {
2  return (
3    <div>
4      <h2>{item.name}</h2>
5      <p>Price: {item.price}</p>
6      <p>Quantity: {item.quantity}</p>
7    </div>
8  );
9}

With highlighted lines

awesome.tsx


1const GroceryItem: React.FC<GroceryItemProps> = ({ item }) => {
2  return (
3    <div>
4      <h2>{item.name}</h2>
5      <p>Price: {item.price}</p>
6      <p>Quantity: {item.quantity}</p>
7    </div>
8  );
9}

With no line numbers

awesome.tsx

const GroceryItem: React.FC<GroceryItemProps> = ({ item }) => {
  return (
    <div>
      <h2>{item.name}</h2>
      <p>Price: {item.price}</p>
      <p>Quantity: {item.quantity}</p>
    </div>
  );
}

With no file icon

awesome.tsx

const GroceryItem: React.FC<GroceryItemProps> = ({ item }) => {
  return (
    <div>
      <h2>{item.name}</h2>
      <p>Price: {item.price}</p>
      <p>Quantity: {item.quantity}</p>
    </div>
  );
}