@leafygreen-ui/syntax
v6.2.0
Published
leafyGreen UI Kit Syntax-highlighting Component
Downloads
46
Keywords
Readme
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]
); | |