Publié par Fabrice le 7 janvier 2019 - Temps de lecture estimé : 4 minutes
Catégories :
Webmastering
- Étiquettes :
accessibilité
CSS
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, SCSS and HTML
* Based on Okaidia theme for Prism
* @author Adilade | www.adilade.fr
* Version 1.1 fo PrismJS 1.20.0
* Revision: 2020-06-15
*/
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;
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: 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.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.punctuation,
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.language-scss .token.string,
.language-css .token.number,
.language-scss .token.number,
.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;
}