Code

Show source code in a standardized way. Want to display shell code snippets? try Snippet.

General

Basic inline codes.

Preview

See code

Run npm i @bolio-ui/core to install.

Or run yarn add @bolio-ui/core to install.

Code Block

Multi line code display.

Preview

See code

import React, { useState } from "react";

const App = () => {
  const [wait, showWaitTime] = useState(0);
  setTimeout(() => showWaitTime(wait + 1), 1000);
  return <div>You've been waiting since {wait} seconds!</div>;
};

export default App;

Width

Specify width manually, or other styles.

Preview

See code

import React, { useState } from "react";

const App = () => {
  const [wait, showWaitTime] = useState(0);
  setTimeout(() => showWaitTime(wait + 1), 1000);
  return <div>You've been waiting since {wait} seconds!</div>;
};

export default App;

Name

Specify the file name for the code block.

Preview

See code

/Components/WaitTime.jsx

import React, { useState } from "react";

const App = () => {
  const [wait, showWaitTime] = useState(0);
  setTimeout(() => showWaitTime(wait + 1), 1000);
  return <div>You've been waiting since {wait} seconds!</div>;
};

export default App;

Classic Style

The classic design style with a line border instead of a background.

Preview

See code

/Components/WaitTime.jsx

import React, { useState } from "react";

const App = () => {
  const [wait, showWaitTime] = useState(0);
  setTimeout(() => showWaitTime(wait + 1), 1000);
  return <div>You've been waiting since {wait} seconds!</div>;
};

export default App;

APIs

Code.Props

Attribute	Description	Type	Accepted values	Default
block	show code in `pre`	`boolean`	-	`false`
name	text displayed at the top of the code block	`string`	-	-
classic	display with classic style	`boolean`	-	`false`
...	native props	`HTMLAttributes`	`'className', ...`	-

Edit this page on GitHub

Checkbox

Collapse

MADE & DESIGNED WITHBY BRUNO ANDRADE