@leafygreen-ui/syntax
leafyGreen UI Kit Syntax-highlighting Component
Last updated 3 months ago by brookescarlett .
Apache-2.0 · Original npm · Tarball · package.json
$ cnpm install @leafygreen-ui/syntax 
SYNC missed versions from official npm registry.

Syntax

npm (scoped)

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

Current Tags

  • 6.2.0                                ...           latest (3 months ago)

25 Versions

  • 6.2.0                                ...           3 months ago
  • 6.1.0                                ...           3 months ago
  • 6.0.1                                ...           3 months ago
  • 6.0.0                                ...           4 months ago
  • 5.0.0                                ...           4 months ago
  • 4.0.0                                ...           4 months ago
  • 3.1.0                                ...           4 months ago
  • 3.0.2                                ...           5 months ago
  • 3.0.1                                ...           5 months ago
  • 3.0.0                                ...           6 months ago
  • 2.8.0                                ...           6 months ago
  • 2.7.0                                ...           9 months ago
  • 2.6.1                                ...           9 months ago
  • 2.6.0                                ...           9 months ago
  • 2.5.0                                ...           10 months ago
  • 2.4.0                                ...           10 months ago
  • 2.3.0                                ...           a year ago
  • 2.2.0                                ...           a year ago
  • 2.1.0                                ...           a year ago
  • 2.0.0                                ...           a year ago
  • 1.0.4                                ...           a year ago
  • 1.0.3                                ...           a year ago
  • 1.0.2                                ...           2 years ago
  • 1.0.1                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
Downloads
Today 0
This Week 0
This Month 1
Last Day 0
Last Week 1
Last Month 32
Dev Dependencies (0)
None

Copyright 2014 - 2016 © taobao.org |