Skip to main content

Pivotal UI

v19.0.0
Components / Code
Edit this page
Report an issue

Code

Basic unstyled
class Foo
  def bar
    puts 'hi'
  end
end
Inline

This is an example of a paragraph with an inline code snippet within it.

Inline dark

This is an example of a paragraph with a dark inline code snippet within it.

Styled Code

In order to show syntax-highlighted code, you will need to apply a language specific class to the code tag. For example, .language-ruby.

There are several languages already available (and others available from the Prismjs.com website), including:

  • Markup
  • CSS
  • C-like
  • JavaScript
  • Java
  • PHP
  • CoffeeScript
  • Sass
  • Bash
  • Python
  • HTTP
  • Ruby
  • Go
<pre><code class="language-ruby">class Foo
  def bar
    puts 'hi'
  end
end</code></pre>
Scrollable
class Foo
  def bar
    puts 'hi'
  end

  def bar
    puts 'hi'
  end

  def bar
    puts 'hi'
  end

  def bar
    puts 'hi'
  end

  def bar
    puts 'hi'
  end

  def bar
    puts 'hi'
  end

  def bar
    puts 'hi'
  end
end
Terminal window

Use the terminal class around a <ul> that has class terminal-dots to wrap code blocks in a terminal window.

~/my/computer
$ echo 'Hello World!';
Terminal window with Mac-styled buttons

Apply the color class to the terminal-dots to give them the colors they have in Mac OS X.

~/my/computer
$ echo 'Hello World!';

Imports

Import CSS:

import 'pivotal-ui/css/code';