Code

View on MongoDB.design

Installation

Yarn

yarn add @leafygreen-ui/code

NPM

npm install @leafygreen-ui/code

Source Code Pro Font

In addition to using a limited amount of our standard brand font, this component uses the open-source monospace font "Source Code Pro". For this component to display correctly, loading the following weights / styles of "Source Code Pro" is necessary:

• 400 / normal
• 400 / italic
• 600 / normal

You can find instructions for using Google's CDN for font delivery, and download "Source Code Pro" on Google Fonts.

We recommend using Google's CDN for loading this font to optimize for caching the assets, speeding up loading times for webpages as a result. We use the following HTML in our `` tags to load the necessary variants of "Source Code Pro":

Example

import Code from '@leafygreen-ui/code';

const codeSnippet = `
function greeting(entity) {
  return \`Hello, \${entity}!\`;
}

console.log(greeting('World'));
`;

const SomeComponent = () =&gt; <code>{codeSnippet}</code>;

Output HTML

<div class="leafygreen-ui-1xban8j">
  <div class="leafygreen-ui-1q8jsgx">
    <pre class="leafygreen-ui-5u6rr1">			<code class="lg-highlight-hljs-light leafygreen-ui-16k3j4z">
				<span class="lg-highlight-function">
					<span class="lg-highlight-keyword">function</span>
					<span class="lg-highlight-title">greeting</span>
					(
					<span class="lg-highlight-params">entity</span>
					)
				</span>
				{
				<span class="lg-highlight-keyword">return</span>
				<span class="lg-highlight-string">
					`Hello, <span class="lg-highlight-subst">${entity}</span>!`
				</span>;
				}
				<span class="lg-highlight-built_in">console</span>
				.log(greeting(
				<span class="lg-highlight-string">'World'</span>));
			</code>
		</pre>
    <div class="leafygreen-ui-1p8ha9w">
      <button tabindex="0" class="copy-btn leafygreen-ui-nx7krf" aria-label="Copy" aria-disabled="false" data-clipboard-text="function greeting(entity) { return `Hello, ${entity}!`; } console.log(greeting('World'));">
        <span class="leafygreen-ui-1rvdyoi">
          <svg class="" viewBox="0 0 16 16" role="img" height="16" width="16">
            <title>Copy Icon</title>
            <g fill-rule="evenodd" fill="currentColor">
              <path d="M13 5h-3V2H7v9h6V5zm2 0v8H5V0h5l5 5z"></path>
              <path d="M4 4v1H2v10h7v-1h1v2H1V4h3z"></path>
            </g>
          </svg>
        </span>
      </button>
    </div>
  </div>
</div>

Properties

interface LanguageOption {
  displayName: string;
  language: Language;
  image?: React.ReactElement;
}