Esempi per varie visualizzazioni di codice.
Varie sintassi nei blocchi di codice delimitati
HTML (con CSS e 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();
Codice in linea
Questo è un paragrafo con codice in linea, come <html lang="en">
e console.log('Hello World');
. Uno snippet più lungo come document.onload = function() { console.log('Document load!); }
.
Blocchi di codice nidificati in HTML
HTML (con CSS e JS) in un file <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 in un <div>
/* This should highlight as CSS */ .test { color: red; } #test { color: green; }
JavaScript in un <div>
/* This should highlight as JavaScript */ const helloWorld = 'Hello World'; function sayHelloWorld() { console.log(helloWorld); if (false) { // Unreachable code. } return; } sayHelloWorld();
Uno snippet di codice all'interno di un div del selettore, con uno shortcode di confronto
Unità laterali del viewport più piccole
.new-min-viewport-units { --size: 100vmin; --size: 100dvmin; --size: 100svmin; --size: 100lvmin; }
Unità laterali del viewport più grandi
.new-max-viewport-units { --size: 100vmax; --size: 100dvmax; --size: 100svmax; --size: 100lvmax; }
Evidenziazione delle righe
@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;
}
Con --colorized
come alias per le personalizzazioni, l'ultimo passaggio consiste nell'applicare la tavolozza a un elemento che utilizza la famiglia di caratteri a colori:
@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;
}