Herman 6.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: tools.size('rhythm') * 12;
  max-width: 100%;
  overflow: hidden;
}

.code-header

scss
.code-header {
  @include tools.contrasted('theme-light');

  flex: 0 0 auto;
  padding: 0 tools.size('shim');
}

.code-description

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

.hljs-pre, .text-block pre

scss
.hljs-pre,
.text-block pre {
  background-color: tools.color('slight');
  border: 1px solid tools.color('callout');
  color: tools.color('code');
  flex: 1 1 auto;
  flex-wrap: wrap;

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

Syntax Highlighting

Orginal Style from ethanschoonover.com/solarized © Jeremy Hull sourdrums@gmail.com

Related

.hljs-comment, .hljs-quote

scss
.hljs-comment,
.hljs-quote {
  color: tools.color('hljs-comment');
}

.hljs-keyword, .hljs-selector-tag, .hljs-addition

scss
.hljs-keyword,
.hljs-selector-tag,
.hljs-addition {
  color: tools.color('hljs-green');
}

.hljs-number, .hljs-string, .hljs-meta .hljs-meta-string, .hljs-literal, .hljs-doctag, .hljs-regexp

scss
.hljs-number,
.hljs-string,
.hljs-meta .hljs-meta-string,
.hljs-literal,
.hljs-doctag,
.hljs-regexp {
  color: tools.color('hljs-cyan');
}

.hljs-title, .hljs-section, .hljs-name, .hljs-selector-id, .hljs-selector-class

scss
.hljs-title,
.hljs-section,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class {
  color: tools.color('hljs-blue');
}

.hljs-attribute, .hljs-attr, .hljs-variable, .hljs-template-variable, .hljs-class .hljs-title, .hljs-type

scss
.hljs-attribute,
.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-class .hljs-title,
.hljs-type {
  color: tools.color('hljs-yellow');
}

.hljs-built_in, .hljs-deletion

scss
.hljs-built_in,
.hljs-deletion {
  color: tools.color('hljs-red');
}

.hljs-formula

scss
.hljs-formula {
  background: tools.color('hljs-formula');
}

.hljs-emphasis

scss
.hljs-emphasis {
  font-style: italic;
}

.hljs-strong

scss
.hljs-strong {
  font-weight: bolder;
}