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.

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

      // JavaScript
      function load() { = "visible"

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

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

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=",wght@0,400;0,700;1,400;1,700&display=swap">
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>

  var Standard = new Default();


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

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”.