Code Block

The Code Block component can be used to display snytax highlighted code snippets.

Anatomy

Usage Guidelines

The CodeBlock component should only be used for code. Code examples should be concise and easy to understand, but practical and useful.

When to consider a different component

For preformatted content other than code, consider using the pre element alone.

Implementation

This component is not available in WordPress, but is available in the UA Framework for static sites. It uses Prism JS to provide syntax highlighting, but the UA Framework does not include the Prism JS library by default. You will need to include the Prism JS library in your project to use this component with syntax highlighting.

<div className="example">
  <h2>This is a code example with HTML</h2>
</div>

<figure class="ua_code">
  <figcaption>
    <span>html</span>
    <button class="copy-to-clipboard-button" type="button">
      <span>Copy</span>
      <span class="fa fa-copy" aria-hidden="true"></span>
    </button>
  </figcaption>
  <pre><code class="language-html" data-dependencies="html">&lt;div className=&quot;example&quot;&gt;
  &lt;h2&gt;This is a code example with HTML&lt;/h2&gt;
&lt;/div&gt;</code></pre>
</figure>

<CodeBlock lang="html">{`<div className="example">
  <h2>This is a code example with HTML</h2>
</div>
`}</CodeBlock>

React Component Props

lang string (required)

The code language identifier (see list here)

children ReactNode (required)

The code snippet

caption string

The code caption, this defaults to the value of the lang prop

className string

Additional classes to add to the ua_component_wrapper