ua

Customizing PrismJS with CSS variables

Created:


For this blog I use markdown-it for parsing .md and Prism for syntax highlighting.

Prism comes with themes available to use right away. But I wanted to style all myself using only three colors with different shades.

Following is the result of my customising.

First thing first. CSS variables:

/* light theme */
:root {
	--text: hsl(0, 0%, 16%);
	--bg: hsl(0, 0%, 100%);

	--h-text-color: 0, 0%;
	--h-base-color: 276, 16%;
	--h-accent-color: 213, 36%;

	--h-string-attr-name: hsl(var(--h-text-color), 30%);
	--h-punctuation: hsl(var(--h-text-color), 40%);
	--h-comment: hsl(var(--h-text-color), 50%);

	--h-function-attr-value: hsl(var(--h-base-color), 41%);

	--h-regex-important: hsl(var(--h-accent-color), 61%);
	--h-keyword-property: hsl(var(--h-accent-color), 48%);
	--h-tag: hsl(var(--h-accent-color), 36%);
	--h-atrule: hsl(var(--h-accent-color), 26%);

	--h-select: hsl(0, 0%, 88%);
	--h-bg: var(--bg);
}

/* dark theme */
html.dark {
	--text: hsl(0, 0%, 94%);
	--bg: hsl(247, 12%, 15%);

	--h-text-color: 0, 0%;
	--h-base-color: 60, 100%;
	--h-accent-color: 200, 100%;

	--h-string-attr-name: hsl(var(--h-text-color), 75%);
	--h-punctuation: hsl(var(--h-text-color), 45%);
	--h-comment: hsl(var(--h-text-color), 55%);

	--h-function-attr-value: hsl(var(--h-base-color), 82%);
	--h-atrule: hsl(var(--h-base-color), 66%);
	--h-regex-important: hsl(var(--h-base-color), 40%);

	--h-keyword-property: hsl(var(--h-accent-color), 75%);
	--h-tag: hsl(var(--h-accent-color), 46%);

	--h-select: hsl(200, 100%, 5%);
	--h-bg: var(--bg);
}

Styling tokens:

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: var(--h-comment);
}

.token.punctuation {
	color: var(--h-punctuation);
}

.token.tag,
.token.boolean,
.token.number,
.token.selector,
.token.deleted {
	color: var(--h-tag);
}

.token.keyword,
.token.property,
.token.constant,
.token.symbol,
.token.builtin {
	color: var(--h-keyword-property);
}

.token.attr-name,
.token.string,
.token.char,
.token.operator,
.token.entity,
.token.url,
.token.parameter,
.language-css .token.string,
.style .token.string,
.token.variable,
.token.inserted {
	color: var(--h-string-attr-name);
}

.token.function,
.token.attr-value {
	color: var(--h-function-attr-value);
}

.token.atrule {
	color: var(--h-atrule);
}

.token.regex,
.token.important {
	color: var(--h-regex-important);
}

.token.important,
.token.bold {
	font-weight: bold;
}
.token.italic {
	font-style: italic;
}

.token.entity {
	cursor: help;
}

And the rest:

code,
pre[class*='language-'] {
	color: var(--text);
	background: var(--h-bg);

	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;

	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	tab-size: 2;
	hyphens: none;
}

/* Code blocks */
pre[class*='language-'] {
	overflow: auto;

	border: 1px solid gray;
	border-radius: 0.5rem;

	margin: 1.5rem 0;
	padding: 1.5rem clamp(1rem, 5%, 2.5rem);
}

pre[class*='language-']::selection,
pre[class*='language-'] ::selection,
code[class*='language-']::selection,
code[class*='language-'] ::selection {
	text-shadow: none;
	background: var(--h-select);
}
/* Inline code */
:not(pre) > code {
	padding: 0.15em 0.2em 0.05em;
	white-space: normal;
	background: var(--bg);
}