कोड

कोड के अलग-अलग डिसप्ले के उदाहरण.

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

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

स्विचर div के अंदर एक कोड स्निपेट, जिसमें तुलना करने वाला शॉर्टकोड है

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

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

कोड