Opportunity Standard

Inline Code

@nycopportunity/pattern-elements/src/elements/code

Demonstration

An example of inline code.

Code is primarily a utility for documentation, particularly for the Opportunity Standard documentation site. However, it may be used in other contexts as well. Inline code is styled within p, li, td, dt, and dd tags.

Code Block

@nycopportunity/pattern-elements/src/elements/code

Demonstration

<!DOCTYPE html>
<html dir="ltr" lang="en">
  <head>
    <style>
      /** CSS */
      body {
        visibility: hidden;
      }
    </style>

    <script>
      // JavaScript
      function load() {
        document.body.style.visibility = "visible"
      };
    </script>
  </head>

  <body>
    <h1>Opportunity Standard</h1>
    <p>The Opportunity Standard is the design system for NYC Opportunity's digital products.</p>
  </body>
</html>

Code blocks enable the demonstration of multiple lines of code. Supported block syntax is HTML, CSS, JavaScript, or Sass.

Font Face

@nycopportunity/standard/src/elements/code

The Opportunity Standard uses JetBrains Mono as it’s mono spaced font face. To import this font, include the following stylesheet link to it in the head of the document.

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap">

Syntax Highlighting

@nycopportunity/standard/src/@nycopportunity/pattern-elements/src/elements/code

Global Script

Code requires JavaScript for syntax highlighting. The Opportunity Standard uses highlight.js to and a helper utility to provide syntax highlighting. To use the code highlight utility through the global script use the following code:

<script src="@nycopportunity/standard/dist/js/default.js"></script>

<script>
  var Standard = new Default();

  Standard.codeHighlight();
</script>

This will instantiate the utility.

Module Import

To use the utility directly import the module from the source.

import CodeHighlight from '@nycopportunity/pattern-elements/src/elements/code/code-highlight';

new CodeHighlight();

Configuration

The utility can be configured by passing and object {} with any of the following properties.

Property	Description
`script`	The CDN URL for the highlight.js JavaScript. Defaults to loading version `9.18.1` via JsDelivr.
`link`	The CDN URL for the highlight.js stylesheet. Defaults to loading version `9.18.1` via JsDelivr.
`syntax`	The languages to support. Defaults to HTML, CSS, JavaScript, and Sass.
`callback`	The callback method to execute when the script loads. Defaults to a configuration for highlight.js and adds all all `pre` tags to the tabbing order by setting their tabindex to “0”.