কোডের বিভিন্ন প্রদর্শনের উদাহরণ।
বেড়া কোড ব্লকে বিভিন্ন সিনট্যাক্স
এইচটিএমএল (সিএসএস এবং জেএস সহ)
<!-- 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;
}
জাভাস্ক্রিপ্ট
/* 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!); }
কোড ব্লক HTML এ নেস্টেড
HTML (CSS এবং JS সহ) একটি <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>
একটি <div>
এ CSS
/* This should highlight as CSS */ .test { color: red; } #test { color: green; }
একটি <div>
এ জাভাস্ক্রিপ্ট
/* 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;
}