Exemples de différentes présentations du code.
Différentes syntaxes dans les blocs de code délimités
HTML (avec CSS et JS)
<!-- This should highlight as HTML -->
<head>
<title>Example</title>
<style>
/* This should highlight as CSS */
.test {
color: red;
}
</style>
</head>
<body>
<p class="test">This is an example of a simple HTML page with one paragraph.</p>
</body>
<script>
/* This should highlight as JavaScript */
const helloWorld = 'Hello World';
function sayHelloWorld() {
console.log(helloWorld);
if (false) {
// Unreachable code.
}
return;
}
sayHelloWorld();
</script>
CSS
/* This should highlight as CSS */
.test {
color: red;
}
#test {
color: green;
}
JavaScript
/* This should highlight as JavaScript */
const helloWorld = 'Hello World';
function sayHelloWorld() {
console.log(helloWorld);
if (false) {
// Unreachable code.
}
return;
}
sayHelloWorld();
Code intégré
Il s'agit d'un paragraphe contenant du code intégré, comme <html lang="en">
et console.log('Hello World');
. Un extrait plus long, comme document.onload = function() { console.log('Document load!); }
.
Blocs de code imbriqués en HTML
HTML (avec CSS et JS) dans un <div>
<!-- This should highlight as HTML --> <head> <title>Example</title> <style> /* This should highlight as CSS */ .test { color: red; } </style> </head> <body> <p class="test">This is an example of a simple HTML page with one paragraph.</p> </body> <script> /* This should highlight as JavaScript */ const helloWorld = 'Hello World'; function sayHelloWorld() { console.log(helloWorld); if (false) { // Unreachable code. } return; } sayHelloWorld(); </script>
CSS dans un <div>
/* This should highlight as CSS */ .test { color: red; } #test { color: green; }
JavaScript dans un <div>
/* This should highlight as JavaScript */ const helloWorld = 'Hello World'; function sayHelloWorld() { console.log(helloWorld); if (false) { // Unreachable code. } return; } sayHelloWorld();
Extrait de code dans une section div de commutateur, avec un code court de comparaison
Plus petites unités latérales de la fenêtre d'affichage
.new-min-viewport-units { --size: 100vmin; --size: 100dvmin; --size: 100svmin; --size: 100lvmin; }
Unités latérales de la fenêtre d'affichage les plus grandes
.new-max-viewport-units { --size: 100vmax; --size: 100dvmax; --size: 100svmax; --size: 100lvmax; }
Mise en surbrillance des lignes
@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
@font-palette-values --colorized {
font-family: "Bungee Spice";
base-palette: 0;
override-colors: 0 hotpink, 1 cyan, 2 white;
}
Avec --colorized
comme alias pour les personnalisations, la dernière étape consiste à appliquer la palette à un élément qui utilise la famille de polices de couleur:
@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
@font-palette-values --colorized {
font-family: "Bungee Spice";
base-palette: 0;
override-colors: 0 hotpink, 1 cyan, 2 white;
}
.spicy {
font-family: "Bungee Spice";
font-palette: --colorized;
}