Syntax

View on Storybook

Installation

Yarn

yarn add @leafygreen-ui/syntax

NPM

npm install @leafygreen-ui/syntax

Example

import Syntax from '@leafygreen-ui/syntax';

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

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

const SomeComponent = () => <Syntax>{codeSnippet}</Syntax>;

Output HTML

<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>

Properties

Prop	Type	Description	Default
children	string	This is the code snippet that will be rendered in the code block.
lang	'javascript', 'js', 'typescript', 'ts', 'cs', 'csharp', 'cpp', 'go', 'http', 'ini', 'java', 'perl', 'php', 'python', 'ruby', 'rust', 'scala', 'swift, 'kotlin', 'objectivec', 'bash', 'shell', 'sql', 'yaml', 'json', 'diff', 'graphql', 'xml', 'none'	Required The language to highlight the code block as. When set to 'none', no syntax highlighting will be applied.
darkMode	boolean	Determines whether or not the component will appear in darkMode.	false
className	string	Applies a className to the root element's classList.
highlightLines	Array<number or [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]);