Example of all Languages Syntax Highlight

By Anubhav Ghosh•30th October 2024

webdev

A comprehensive guide to understanding and using React Hooks

Liquid

{% if product.available %}
  {% assign price = product.price | money %}
  <h2>{{ product.title }}</h2>
  {% for variant in product.variants %}
    <option value="{{ variant.id }}">{{ variant.title }}</option>
  {% endfor %}
{% endif %}

{% if product.available %}
  {% assign price = product.price | money %}
  <h2>{{ product.title }}</h2>
  {% for variant in product.variants %}
    <option value="{{ variant.id }}">{{ variant.title }}</option>
  {% endfor %}
{% endif %}

Html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Product Page</title>
</head>
<body>
    <header class="bg-blue-500">
        <nav>
            <ul>
                <li><a href="/">Home</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h1>Welcome</h1>
    </main>
</body>
</html>

Css

.product-card {
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.product-card:hover {
    transform: translateY(-4px);
}

@media (max-width: 768px) {
    .product-card {
        margin: 10px;
    }
}

Tailwind

<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
    <div class="md:flex">
        <div class="md:shrink-0">
            <img class="h-48 w-full object-cover md:h-full md:w-48" src="product.jpg" alt="Product">
        </div>
        <div class="p-8">
            <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">New Arrival</div>
            <p class="mt-2 text-slate-500">Description here</p>
        </div>
    </div>
</div>

Javascript

const addToCartButton = document.querySelector('.add-to-cart');
const quantityInput = document.querySelector('.quantity');

addToCartButton.addEventListener('click', () => {
    const quantity = parseInt(quantityInput.value);
    
    if (quantity > 0) {
        addToCart({
            id: productId,
            quantity: quantity
        });
    }
});

function addToCart(item) {
    fetch('/cart/add.js', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(item)
    })
    .then(response => response.json())
    .then(data => {
        updateCartCount(data.items.length);
    });
}

Line Higlight

class ShoppingCart {
  constructor() {
    this.items = [];
  }

  addItem(item) {
    this.items.push(item); 
  }

  removeItem(itemName) {
    this.items = this.items.filter(item => item.name !== itemName);
  }

  displayCart() {
    console.log(this.items);
  }
}

Word Higlight

 carrot

const [age, setAge] = useState(50);
const [name, setName] = useState("Taylor");

To check the heading levels