Un thème accessible pour PrismJS

Fabrice 3 mn Webmastering

Un thème accessible pour PrismJS

Un thème accessible avec des contrastes en AAA pour la célèbre librairie de coloration syntaxique JavaScript PrismJS.

Même s'il existe déjà un thème accessible pour PrismJS (a11y syntax highlighting), je trouve les couleurs de ce dernier vraiment trop "flashy", quasiment fluo. J'ai donc décidé d'en refaire un avec des couleurs beaucoup plus "soft".
Une seule version sur fond noir et évidement avec des contrastes en triple A (ratio minimum de 7.35:1). Si vous souhaitez un exemple, c'est le thème qui est utilisé sur cette page.

/**
 * Adilade a11y theme for JavaScript, CSS and HTML
 * Based on Okaidia theme for Prism
 * @author Adilade
 */

code[class*="language-"],
pre[class*="language-"] {
	color: #f8f8f2;
	background: none;
	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.5;

	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;

	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

/* Code blocks */
pre[class*="language-"] {
	padding: 1em;
	margin: .5em 0;
	overflow: auto;
	border-radius: 0.3em;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	background: #272822;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: .1em;
	border-radius: .3em;
	white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: #A7BBD7;
}

.token.punctuation {
	color: #f8f8f2;
}

.namespace {
	opacity: .7;
}

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
	color: #F99EBD;
}

.token.boolean,
.token.number {
	color: #C1A9FF;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
	color: #C0D67C;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
	color: #f8f8f2;
}
.token.variable {
	color: #D3B6F7;
}
.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
	color: #e6db74;
}

.token.keyword {
	color: #A2DFEF;
}

.token.regex,
.token.important {
	color: #FFCF52;
}
.token.hexcode,
.token.delimiter {
	color: #c9b586;
}

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

.token.entity {
	cursor: help;
}