Customize styles highlight.js


Posted on Aug 02, 2020


featured image
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


dev css highlight javascript nodejs
Search
Side Widget
You can put anything you want inside of these side widgets. They are easy to use, and feature the new Bootstrap 4 card containers!