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] ); |