Herman 2.0.0

Herman Code-Block Styles

Code-block styles and syntax highlighting, for both user and machine-generated code samples.

Related

Highlight.JS [external]

Code Blocks

scss
.code-block {
  align-items: stretch;
  display: flex;
  flex: 1 1 20em;
  flex-direction: column;
  max-height: size('rhythm') * 12;
  max-width: 100%;
  overflow: hidden;
}

.code-header

scss
.code-header {
  @include contrasted('theme-light');
  flex: 0 0 auto;
  padding: 0 size('shim');
}

.code-description

scss
.code-description {
  @include before(' – ');
}

.hljs-pre, .text-block pre

scss
.hljs-pre,
.text-block pre {
  // sass-lint:disable-line force-element-nesting
  background-color: color('slight');
  border: 1px solid color('callout');
  color: color('code');
  flex: 1 1 auto;
  flex-wrap: wrap;

  code {
    padding: size('shim');
  }
}

$hljs-colors

scss
$hljs-colors: (
  'hljs-comment': #93a1a1,
  'hljs-green': #859900,
  'hljs-cyan': #2aa198,
  'hljs-blue': #268bd2,
  'hljs-yellow': #b58900,
  'hljs-orange': #cb4b16,
  'hljs-red': #dc322f,
  'hljs-formula': #eee8d5,
);

Colors for code-highlighting with hljs, based on Solarized-Light & the Herman brand.

Color Previews

hljs-comment #93a1a1 hsl(180, 7%, 60%)
hljs-green #859900 hsl(68, 100%, 30%)
hljs-cyan #2aa198 hsl(175, 59%, 40%)
hljs-blue #268bd2 hsl(205, 69%, 49%)
hljs-yellow #b58900 hsl(45, 100%, 35%)
hljs-orange #cb4b16 hsl(18, 80%, 44%)
hljs-red #dc322f hsl(1, 71%, 52%)
hljs-formula #eee8d5 hsl(46, 42%, 88%)