Create a file hljs-custom.css with the following content:
/* custom hljs styles*/
.hljs {
display: block;
overflow-x: auto;
padding: .5em;
background: #1d1f21
}
.hljs,
.hljs-subst {
color: #c5c8c6
}
.hljs-comment {
color: #888
}
.hljs-attribute,
.hljs-doctag,
.hljs-keyword,
.hljs-meta-keyword,
.hljs-name,
.hljs-selector-tag {
font-weight: 700;
color: #81a2be;
}
.hljs-deletion,
.hljs-number,
.hljs-quote,
.hljs-selector-class,
.hljs-selector-id,
.hljs-string,
.hljs-template-tag,
.hljs-type {
color: #99cc99;
}
.hljs-section,
.hljs-title {
color: #99cc99;
font-weight: 700
}
.hljs-link,
.hljs-regexp,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-symbol,
.hljs-template-variable,
.hljs-variable {
color: #bc6060
}
.hljs-literal {
color: #78a960
}
.hljs-addition,
.hljs-built_in,
.hljs-bullet,
.hljs-code {
color: #de935f;
}
.hljs-meta {
color: #1f7199
}
.hljs-meta-string {
color: #4d99bf
}
.hljs-emphasis {
font-style: italic
}
.hljs-strong {
font-weight: 700
}
Include it as any other style sheet
<link rel='stylesheet' href='/stylesheets/hljs-custom.css' />
Photo by Aaron Burden on Unsplash