Nostalgic Perogi Monogramming

    This package has been deprecated

    Author message:

    Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

    @leafygreen-ui/syntax
    TypeScript icon, indicating that this package has built-in type declarations

    6.2.0 • Public • Published

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

    Keywords

    none

    Install

    npm i @leafygreen-ui/syntax

    DownloadsWeekly Downloads

    81

    Version

    6.2.0

    License

    Apache-2.0

    Unpacked Size

    301 kB

    Total Files

    34

    Last publish

    Collaborators

    • dave.mccarthy
    • hswolff
    • shaneeza
    • thesonofthomp