14.3.3 • Published 6 days ago

@leafygreen-ui/code v14.3.3

Weekly downloads
435
License
Apache-2.0
Repository
github
Last release
6 days ago

Code

npm (scoped)

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 <head> tags to load the necessary variants of "Source Code Pro":

<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet" />

Example

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

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

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

const SomeComponent = () => <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
        data-clipboard-text="function greeting(entity) { return `Hello, ${entity}!`; } console.log(greeting('World'));"
        aria-disabled="false"
        aria-label="Copy"
        class="copy-btn leafygreen-ui-nx7krf"
        tabindex="0"
      >
        <span class="leafygreen-ui-1rvdyoi">
          <svg width="16" height="16" role="img" viewBox="0 0 16 16" class="">
            <title>Copy Icon</title>
            <g fill="currentColor" fill-rule="evenodd">
              <path d="M13 5h-3V2H7v9h6V5zm2 0v8H5V0h5l5 5z"></path>
              <path d="M4 4v1H2v10h7v-1h1v2H1V4h3z"></path>
            </g>
          </svg>
        </span>
      </button>
    </div>
  </div>
</div>

Properties

PropTypeDescriptionDefault
children (Required)stringThis is the code snippet that will be rendered in the code block.''
language (Required)'javascript', 'typescript', 'cs', 'csharp', 'cpp', 'go', 'http','java', 'perl', 'php', 'python', 'ruby', 'scala', 'swift', 'kotlin','objectivec', 'dart', 'bash', 'shell', 'sql', 'yaml', 'json', 'diff', 'xml', 'none'The language to highlight the code block as. When set to 'none', no syntax highlighting will be applied.
darkModebooleanDetermines whether or not the component will appear in dark mode.false
classNamestringApplies a className to the root element's classList.
showLineNumbersbooleanShows line numbers next to each line of code in the passed code snippet. NOTE: While you can set this to true regardless of the code component being multiline, the line numbers will not be displayed if the multiline prop is true.false
lineNumberStartnumberSpecifies the number by which to start line numbering.1
showWindowChromebooleanShows a stylized window chrome frame around the code snippet. This is purely stylistic.false
chromeTitlestringShows a filename-like title in the window chrome frame.NOTE: While you can set this prop if showWindowChrome is false, it will not be displayed unless the showWindowChrome prop is true.''
showCustomActionButtonsbooleanShows custom action buttons in the panel if set to true and there is at least one item in customActionButtonsfalse
customActionButtonsArray<React.ReactElement>An array of custom action buttons using the IconButton component. For example: [<IconButton><Icon glyph="Cloud" /></IconButton>, <IconButton><Icon glyph="Code" /></IconButton>][]
onCopyFunctionCallback fired when Code is copied
copyablebooleanWhen true, allows the code block to be copied to the user's clipboardtrue
highlightLinesArray<number | [number, number]>An optional array of lines to highlight. The array can only contain numbers corresponding to the line numbers to highlight, and / or tuples representing a range (e.g. [6, 10]);
languageOptionsArray<LanguageOption> (see below)An array of language options. When provided, a LanguageSwitcher dropdown is rendered.
onChange(language: LanguageOption) => voidA change handler triggered when the language is changed. Invalid when no languageOptions are provided
usePortalbooleanWill position the language switcher dropdown relative to its parent without using a Portal if usePortal is set to false.true
portalContainerHTMLElement | nullSets the container used for the language switcher's dropdown's portal.
scrollContainerHTMLElement | nullIf the language switcher's dropdown's portal has a scrollable ancestor other than the window, this prop allows passing a reference to that element to allow the portal to position properly.
portalClassNamestringPasses the given className to the language switcher's dropdown's portal container if the default portal container is being used.
popoverZIndexnumberSets the z-index CSS property for the language switcher's dropdown.
interface LanguageOption {
  displayName: string;
  language: Language;
  image?: React.ReactElement;
}
@leafygreen-ui/a11y@leafygreen-ui/button@leafygreen-ui/emotion@leafygreen-ui/hooks@leafygreen-ui/icon@leafygreen-ui/icon-button@leafygreen-ui/lib@leafygreen-ui/palette@leafygreen-ui/select@leafygreen-ui/tokens@leafygreen-ui/tooltip@types/facepaint@types/highlight.jsclipboardfacepainthighlight.jshighlightjs-graphqllodashpolished
@everything-registry/sub-chunk-539mongodb-chatbot-ui@mongodb-js/compass-components@lg-chat/lg-markdown@infinitebrahmanuniverse/nolb-_lea
14.3.3

6 days ago

14.3.2

1 month ago

14.3.1

1 month ago

14.3.0

2 months ago

14.2.19

2 months ago

14.2.19-popover.0

4 months ago

14.2.8

10 months ago

14.2.9

9 months ago

14.2.11

9 months ago

14.2.10

9 months ago

14.2.15

8 months ago

14.2.14

8 months ago

14.2.13

8 months ago

14.2.12

9 months ago

14.2.18

6 months ago

14.2.17

7 months ago

14.2.16

7 months ago

15.0.0-alpha.1

10 months ago

15.0.0-alpha.0

10 months ago

14.2.7

11 months ago

14.2.3

12 months ago

14.2.4

12 months ago

14.2.5

11 months ago

14.2.6

11 months ago

14.2.5-next.2

11 months ago

14.2.5-next.3

11 months ago

14.2.5-next.0

12 months ago

14.2.5-next.1

12 months ago

14.2.5-next.6

11 months ago

14.2.5-next.7

11 months ago

14.2.5-next.4

11 months ago

14.2.5-next.5

11 months ago

14.2.1

1 year ago

14.2.2

1 year ago

14.2.0

1 year ago

14.1.0

1 year ago

14.1.1

1 year ago

14.1.2

1 year ago

14.0.0

1 year ago

14.0.1

1 year ago

14.0.2

1 year ago

12.1.0-test.1

2 years ago

13.0.0

2 years ago

13.0.1

1 year ago

12.1.0

2 years ago

12.1.1

2 years ago

12.1.0-next.1

2 years ago

12.1.0-next.0

2 years ago

12.1.0-next.2

2 years ago

12.0.2

2 years ago

12.1.0-test.0

2 years ago

12.0.0

2 years ago

12.0.1

2 years ago

11.0.1

2 years ago

11.0.0

2 years ago

10.0.0

2 years ago

9.5.0

2 years ago

9.4.0

2 years ago

9.3.0

2 years ago

9.1.0

3 years ago

9.2.0

3 years ago

9.0.0

3 years ago

8.1.6

3 years ago

8.1.5

3 years ago

8.1.4

3 years ago

8.1.3

3 years ago

8.1.0

3 years ago

8.1.2

3 years ago

8.1.1

3 years ago

8.0.9

3 years ago

8.0.8

3 years ago

8.0.7

3 years ago

8.0.6

3 years ago

8.0.5

3 years ago

8.0.4

3 years ago

8.0.3

3 years ago

8.0.2

3 years ago

8.0.1

3 years ago

8.0.0

3 years ago

7.3.1

3 years ago

7.3.0

3 years ago

7.2.0

4 years ago

7.1.0

4 years ago

7.0.1

4 years ago

7.0.0

4 years ago

6.0.0

4 years ago

5.0.0

4 years ago

4.0.4

4 years ago

4.0.3

4 years ago

4.0.2

4 years ago

4.0.1

4 years ago

4.0.0

4 years ago

3.5.0

4 years ago

3.4.6

4 years ago

3.4.5

4 years ago

3.4.4

4 years ago

3.4.3

4 years ago

3.4.2

4 years ago

3.4.1

4 years ago

3.4.0

4 years ago

3.3.0

4 years ago

3.2.0

4 years ago

3.1.0

4 years ago

3.0.0

4 years ago

2.0.3

5 years ago

2.0.2

5 years ago

2.0.1

5 years ago

2.0.0

5 years ago

1.0.0

5 years ago