React Code Space

React Code Space is a stylized code syntax highlighter for your documentation/ lesson building.

Code

Code is the base import. It will recieve the below compound components for formatting your code.

import Code from 'react-code-space';

function App() {
  return <Code></Code>;
}

export default App;

Code props

Name	Description	Options	Usage
language	sets the language of the code space	javascript, jsx, css, scss, html	<Code language="jsx">
dark	set the type of code space to dark	default is true	<Code dark>
light	set the type of code space to light	default is true	<Code light>
theme	set the syntax theme of the code space	material, monokai, xonokai	<Code theme="monokai">
icon	adds an icon of the language. default is language.	react, javascript, css, scss, html	<Code icon>, <Code icon="css"/>
shadow	adds a shadow to the code space	default is true	<Code shadow>
neomorph	adds a neomorphism design effect to the code space.	default is true	<Code neomorph>
rounded	adds a border radius to the code space	default is true	<Code rounded>

Code Header

Header can recieve any child and output it in a small container within the Code Space;

import Code from 'react-code-space';

function App() {
  return (
    <Code dark theme='material' language='javascript'>
      <Code.Header>A lovely Header!</Code.Header>
    </Code>
  );
}

export default App;

Code Body

Body is the syntax highlighting portion of the code space. This allows multiple code blocks within a code space.

import Code from 'react-code-space';

const codeString = '//Your code here!';

function App() {
  return (
    <Code dark theme='material' language='javascript'>
      <Code.Header>A lovely Header!</Code.Header>
      <Code.Body content={codeString} />
    </Code>
  );
}

export default App;

Body Props

Name	Description	Options	Usage
content	recieves a string of code to display	a string	<Code.Body content={codeString} />
numbered	adds line numbers to code output	default is true	<Code.Body numbered/>
start	starting point for line numbers	default is 1. Will recieve any number	<Code.Body numbered start={17}/>
highlight	accepts string numbers to highlight lines of code	string of line numbers. will accept ranges	<Code.Body highlight={"4"} />,<Code.Body content={"4,8-11,16"} />
collapsable	makes the code body an animated dropdown	default is true	<Code.Body collapsable />
collapsableText	sets the text for the animated dropdown	a string	<Code.Body collapsableText={"Here is the code!"} />
copy	adds a copy to clipboard functionality	default is true	<Code.Body copy />
blur	adds a blurred effect to reveal on hover	default is true	<Code.Body blur />

Code Doc

Doc is an embedded slot in the code space to add detailed text inline with the code space.

import Code from 'react-code-space';

const codeString = '//Your code here!';

function App() {
  return (
    <Code dark theme='material' language='javascript'>
      <Code.Header>A lovely Header!</Code.Header>
      <Code.Body content={codeString} />
      <Code.Doc>Some simple text explaining the code above or below.</Code.Doc>
    </Code>
  );
}

export default App;

Code Divider

Divider is a simple split to seperate the code blocks with a themed horizontal rule. This can also be styled with three dots with the dots property.

Divider Props

Name	Description	Options	Usage
dots	changes the style to three dots	default is true	<Code.Divider dots/>