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');
}
}
$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%)