Code

Inline

Code is for making inline code snippets that can work within or next to bodies of text.

Sometimes you need to emphasize code like this.

You can also pass a language in like  <div> asdf </div>.

Make the background transparent like this  <div> asdf </div>.

CodeBlock

EuiCodeBlock can be used to create multi-line code blocks. Copy and fullscreen buttons can be enabled via theisCopyable and overflowHeightprops, respectively.

<!--I'm an example of HTML-->
<div>
  <h1>Title</h1>
</div>

import React from 'react';

import { EuiCodeBlock, EuiSpacer } from '../../../../src/components';

const htmlCode = `<!--I'm an example of HTML-->
<div>
  <h1>Title</h1>
</div>
`;

const jsCode = require('!!raw-loader!./code_block');

export default () => (
  <div>
    <EuiCodeBlock language="html">{htmlCode}</EuiCodeBlock>

    <EuiSpacer />

    <EuiCodeBlock
      language="js"
      fontSize="m"
      paddingSize="m"
      color="dark"
      overflowHeight={300}
      isCopyable>
      {jsCode}
    </EuiCodeBlock>

    <EuiSpacer />
  </div>
);