Customize styles highlight.js

Reading Time: < 1 minute

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


About the author

Andrés Canavesi
Andrés Canavesi

Software Engineer with 15+ experience in software development, specialized in Salesforce, Java and Node.js.


Join 22 other subscribers

Leave a Reply