Code block

Code block

The Code component includes preformatted text handling for source code blocks or any other type of preformatted text. The default code block adds a dark background, border, and white text to contrast it with other UI elements.

Default code block

Create a default source code section with a wrapping element that has class .hc-code. Inside, use a <pre> element for each line of text.

This element accepts a data parameter data-hc-prefix to prepend the line with a symbol. If there is no value set, the line of text will stay in its padded position but display no prefix; if the entire attribute is missing, however, the line will shift left to the margin.

npm i @schoolstatus/honeycomb
HTML
Expand Edit in Playground Copy 

<div class="hc-code">
  <pre data-hc-prefix="$">npm i @schoolstatus/honeycomb</pre>
</div>
Developer note

If you’re including HTML tags within a code block, remember that you must use the character reference (or “HTML entity”) for those characters. If you don’t, they’ll render as actual HTML.

Use &lt; for < and &gt; for >, for instance.

Optional elements and attributes

Additional attributes include comments, minimal window “chrome” for an application look, semantic text colors, line highlighting, basic syntax highlighting, and a light theme.

Comments

Create comments by appending .hc-code--comment to a <pre> element within the code block. Comments have the same Gray 500 color as line prefixes.

<!-- user badge -->
<span class="hc-badge">Default</span>
HTML
Expand Edit in Playground Copy 

<div class="hc-code">
  <pre class="hc-code--comment">&lt;!-- user badge --&gt;</pre>
  <pre>&lt;span class="hc-badge"&gt;Default&lt;/span&gt;</pre>
</div>

Window chrome

Add window buttons to the top left for the hint of an application window by appending .hc-code--window to the parent wrapping element.

This is useful for a subtle reminder that the user is looking at a terminal or editor. It can also provide space for absolutely positioned buttons if you’d like to provide functionality as well.

npm i @schoolstatus/honeycomb
installing...
Done!
HTML
Expand Edit in Playground Copy 

<div class="hc-code hc-code--window">
  <pre data-hc-prefix="$">npm i @schoolstatus/honeycomb</pre>
  <pre data-hc-prefix=">">installing...</pre>
  <pre data-hc-prefix=">">Done!</pre>
</div>

Text colors

Change the color of an entire line’s text by appending a semantic color class. Available colors include .hc-code--success, .hc-code--warning, and .hc-code--danger.

npm i @schoolstatus/honeycomb
installing...
Done!
npm update
217 packages updated, 3 critical security issues
HTML
Expand Edit in Playground Copy 

<div class="hc-code hc-code--window">
  <pre data-hc-prefix="$">npm i @schoolstatus/honeycomb</pre>
  <pre data-hc-prefix=">" class="hc-code--warning">installing...</pre>
  <pre data-hc-prefix="✓" class="hc-code--success">Done!</pre>
  <pre data-hc-prefix="$">npm update</pre>
  <pre data-hc-prefix="✓" class="hc-code--danger">217 packages updated, 3 critical security issues</pre>
</div>

Line highlighting

Add .hc-code--highlight to a <pre> line to highlight that entire line in a warning color. This is the only color supported right now.

npm i @schoolstatus/honeycomb
installing...
Error!
HTML
Expand Edit in Playground Copy 

<div class="hc-code hc-code--window">
  <pre data-hc-prefix="$">npm i @schoolstatus/honeycomb</pre>
  <pre data-hc-prefix=">">installing...</pre>
  <pre data-hc-prefix="x" class="hc-code--highlight">Error!</pre>
</div>

Syntax highlighting

Add (very) basic syntax highlighting by wrapping identifiers, attributes, values, operators, and numbers in classes of the format .hc-code--{type}. Them primary use case is HTML and CSS, but these basic types can be extended for other languages as well.

Supported types include:

Plain text doesn’t need to be wrapped or identified.

<div class="hc-code">
  <pre data-hc-prefix="$">npm i @schoolstatus/honeycomb</pre>
  <pre data-hc-prefix=">">installing...</pre>
  <pre data-hc-prefix="✓">Done!</pre>
</div>
HTML
Expand Edit in Playground Copy 

<div class="hc-code">
  <pre>&lt;<span class="hc-code--identifier">div</span> <span class="hc-code--attribute">class</span><span class="hc-code--operator">=</span>"<span class="hc-code--value">hc-code</span>"></pre>
  <pre>  &lt;<span class="hc-code--identifier">pre</span> <span class="hc-code--attribute">data-hc-prefix</span><span class="hc-code--operator">=</span>"<span class="hc-code--value">$</span>"&gt;npm i @schoolstatus/honeycomb&lt;/<span class="hc-code--identifier">pre</span>&gt;</pre>
  <pre>  &lt;<span class="hc-code--identifier">pre</span> <span class="hc-code--attribute">data-hc-prefix</span><span class="hc-code--operator">=</span>"<span class="hc-code--value">></span>"&gt;installing...&lt;/<span class="hc-code--identifier">pre</span>&gt;</pre>
  <pre>  &lt;<span class="hc-code--identifier">pre</span> <span class="hc-code--attribute">data-hc-prefix</span><span class="hc-code--operator">=</span>"<span class="hc-code--value">✓</span>"&gt;Done!&lt;/<span class="hc-code--identifier">pre</span>&gt;</pre>
  <pre>&lt;/<span class="hc-code--identifier">div</span>&gt;</pre>
</div>
Developer note

In the future, if this component is extended, we will introduce two data attributes to handle the language and the theme. These will be data-hc-code-language and data-hc-code-theme, respectively.

Light theme

If you prefer to use a light theme instead of this default dark theme, append .hc-code--light to the parent element. This is not the preferred theme, however, and we encourage you to use the default.

npm i @schoolstatus/honeycomb
installing...
Error!
npm i @schoolstatus/honeycomb --force
installing...
Done!
npm update
217 packages updated, 3 critical security issues
HTML
Expand Edit in Playground Copy 

<div class="hc-code hc-code--window hc-code--light">
  <pre data-hc-prefix="$">npm i @schoolstatus/honeycomb</pre>
  <pre data-hc-prefix=">">installing...</pre>
  <pre data-hc-prefix="x" class="hc-code--highlight">Error!</pre>
  <pre data-hc-prefix="$">npm i @schoolstatus/honeycomb --force</pre>
  <pre data-hc-prefix=">" class="hc-code--warning">installing...</pre>
  <pre data-hc-prefix="✓" class="hc-code--success">Done!</pre>
  <pre data-hc-prefix="$">npm update</pre>
  <pre data-hc-prefix="✓" class="hc-code--danger">217 packages updated, 3 critical security issues</pre>
</div>

Max height

To set a max-height on the code block and enable vertical scrolling, add the class .hc-code--max-height to the parent element.

Note that using this in conjunction with .hc-code--window is not yet supported. If it is, it will most likely require an additional inner wrapping class.

module.exports = {
  presets: [],
  prefix: '',
  theme: {
    // tailwind overwrites
    borderRadius: {
      'none': '0',
      'xs': '0.125rem',
      'sm': '0.25rem',
      DEFAULT: '0.375rem',
      'md': '0.5rem',
      'lg': '0.75rem',
      'xl': '1rem',
      '2xl': '1.5rem',
      'full': '9999px',
    },
    fontFamily: {
      'sans': ['Civil, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'],
      'title': ['Civil, Inter, sans-serif'],
      'brand': ['Civil, Inter, sans-serif'],
      'mono': ['ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'],
      'icon': ['Honeycomb'],
    },
    fontSize: {
     '2xs': '0.75rem',
     'xs': '0.8125rem',
     'sm': '0.875rem',
     'base': '0.875rem',
     'md': '1rem',
     'lg': '1.125rem',
     'xl': '1.25rem',
     '2xl': '1.5rem',
     '3xl': '2rem',
    }
  }
}
HTML
Expand Edit in Playground Copy 

<div class="hc-code hc-code--max-height">
  <pre>
module.exports = {
  presets: [],
  prefix: '',
  theme: {
    // tailwind overwrites
    borderRadius: {
      'none': '0',
      'xs': '0.125rem',
      'sm': '0.25rem',
      DEFAULT: '0.375rem',
      'md': '0.5rem',
      'lg': '0.75rem',
      'xl': '1rem',
      '2xl': '1.5rem',
      'full': '9999px',
    },
    fontFamily: {
      'sans': ['Civil, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'],
      'title': ['Civil, Inter, sans-serif'],
      'brand': ['Civil, Inter, sans-serif'],
      'mono': ['ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'],
      'icon': ['Honeycomb'],
    },
    fontSize: {
     '2xs': '0.75rem',
     'xs': '0.8125rem',
     'sm': '0.875rem',
     'base': '0.875rem',
     'md': '1rem',
     'lg': '1.125rem',
     'xl': '1.25rem',
     '2xl': '1.5rem',
     '3xl': '2rem',
    }
  }
}</pre>
</div>

Basic preformatted text

If you only need basic preformatted text handling via a standard <pre> element, simple add the class .hc-pre to this element and include text as normal.

Remember that it cannot accept HTML as that will render, just like with the .hc-code block above.

April is the cruellest month, breeding
Lilacs out of the dead land, mixing
Memory and desire, stirring
Dull roots with spring rain.
Winter kept us warm, covering
Earth in forgetful snow, feeding
A little life with dried tubers.
Summer surprised us, coming over the Starnbergersee
With a shower of rain; we stopped in the colonnade,
And went on in sunlight, into the Hofgarten,
And drank coffee, and talked for an hour.
Bin gar keine Russin, stamm’ aus Litauen, echt deutsch.
And when we were children, staying at the archduke’s,
My cousin’s, he took me out on a sled,
And I was frightened. He said, Marie,
Marie, hold on tight. And down we went.
In the mountains, there you feel free.
I read, much of the night, and go south in the winter.
HTML
Expand Edit in Playground Copy 

<pre class="hc-pre">
April is the cruellest month, breeding
Lilacs out of the dead land, mixing
Memory and desire, stirring
Dull roots with spring rain.
Winter kept us warm, covering
Earth in forgetful snow, feeding
A little life with dried tubers.
Summer surprised us, coming over the Starnbergersee
With a shower of rain; we stopped in the colonnade,
And went on in sunlight, into the Hofgarten,
And drank coffee, and talked for an hour.
Bin gar keine Russin, stamm’ aus Litauen, echt deutsch.
And when we were children, staying at the archduke’s,
My cousin’s, he took me out on a sled,
And I was frightened. He said, Marie,
Marie, hold on tight. And down we went.
In the mountains, there you feel free.
I read, much of the night, and go south in the winter.
</pre>