Code

The Code component is used to highlight the syntax of a code block. It accepts a string as children and strips of its indentation.

<Code
  type="block"
>
  
        const message = 'This is JavaScript code!';

        console.log(message);
      
</Code>
const message = 'This is JavaScript code!';

console.log(message);

const message = 'This is JavaScript code!';

console.log(message);

Languages

Besides the default `language` JavaScript the component also renders TypeScript, JSX and TSX.

<React.Fragment>
  <Property
    name="language"
    value="typescript"
  />
  <Code
    language="typescript"
    type="block"
  >
    
          const message: string = 'This is TypeScript code!';

          console.log(message);
        
  </Code>
  <Property
    name="language"
    value="shell"
  />
  <Code
    language="shell"
    type="block"
  >
    
          # This is a comment
          $ npm run install
        
  </Code>
  <hr />
  <Property
    name="language"
    value="tsx"
  />
  <Code
    language="tsx"
    type="block"
  >
    
          const Component = (): ReactElement =&gt; &lt;div&gt;&lt;/div&gt;;
        
  </Code>
  <hr />
  <Property
    name="language"
    value="jsx"
  />
  <Code
    language="jsx"
    type="block"
  >
    
          const Component = () =&gt; &lt;div&gt;&lt;/div&gt;;
        
  </Code>
</React.Fragment>

language: "typescript"

const message: string = 'This is TypeScript code!';

console.log(message);

language: "shell"

# This is a comment
$ npm run install

language: "tsx"

const Component = (): ReactElement => <div></div>;

language: "jsx"

const Component = () => <div></div>;

Inline

Code can also be rendered inline in a Paragraph.

<Paragraph>
  This block contains an inline 
  <Code
    type="inline"
  >
    variableName
  </Code>
  .
</Paragraph>

This block contains an inline variableName.