कोड

कोड को अलग-अलग तरह से दिखाने के उदाहरण.

फ़ेंस किए गए कोड ब्लॉक में अलग-अलग सिंटैक्स

एचटीएमएल (सीएसएस और 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>

सीएसएस

/* 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();

इनलाइन कोड

यह एक पैराग्राफ़ है, जिसमें <html lang="en"> और console.log('Hello World'); जैसे इनलाइन कोड हैं. document.onload = function() { console.log('Document load!); } जैसा लंबा स्निपेट.

एचटीएमएल में नेस्ट किए गए कोड ब्लॉक

<div> में एचटीएमएल (सीएसएस और 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>

<div> में सीएसएस

/* This should highlight as CSS */
.test {
  color: red;
}

#test {
  color: green;
}

<div> में JavaScript

/* This should highlight as JavaScript */
const helloWorld = 'Hello World';

function sayHelloWorld() {
  console.log(helloWorld);
  if (false) {
    // Unreachable code.
  }
  return;
}

sayHelloWorld();

तुलना करने वाले शॉर्टकोड के साथ, स्विचर डिव में मौजूद कोड स्निपेट

सबसे छोटी व्यूपोर्ट साइड यूनिट

.new-min-viewport-units {
  --size: 100vmin;
  --size: 100dvmin;
  --size: 100svmin;
  --size: 100lvmin;
}

व्यूपोर्ट की सबसे बड़ी साइड यूनिट

.new-max-viewport-units {
  --size: 100vmax;
  --size: 100dvmax;
  --size: 100svmax;
  --size: 100lvmax;
}

लाइन हाइलाइट करना

@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;
}

पसंद के मुताबिक बनाने के लिए --colorized को उपनाम के तौर पर इस्तेमाल करने के बाद, आखिरी चरण में पैलेट को उस एलिमेंट पर लागू करना है जिसमें कलर फ़ॉन्ट फ़ैमिली का इस्तेमाल किया जा रहा है:

@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;
}