Syntax Highlighting

Examples of HTML, CSS and JavaScript code with automatic syntax highlighting.

HTML

HTML code example with colored tags, attributes and comments:

<!-- Contact form -->
<form action="/submit" method="post">
  <label for="name">Name</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>

  <button type="submit">Submit</button>
</form>

CSS

CSS code example with colored selectors, properties and values:

/* Form styles */
form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background-color: var(--color-background);
  border-radius: var(--radius-lg);
}

input[type="text"],
input[type="email"] {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

button {
  background-color: rgb(59, 130, 246);
  color: white;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
}

JavaScript

JavaScript code example with colored keywords, functions and comments:

// Form validation module
const FormValidator = {
  /**
   * Validates an email field
   */
  validateEmail(email) {
    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return regex.test(email);
  },

  /**
   * Submits the form
   */
  async submitForm(formData) {
    try {
      const response = await fetch('/api/submit', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(formData)
      });

      if (!response.ok) {
        throw new Error('Submission error');
      }

      const result = await response.json();
      return { success: true, data: result };
    } catch (error) {
      console.error('Error:', error);
      return { success: false, error: error.message };
    }
  },

  init() {
    const form = document.querySelector('form');
    if (!form) return;

    form.addEventListener('submit', async (e) => {
      e.preventDefault();

      const formData = {
        name: form.name.value,
        email: form.email.value
      };

      if (!this.validateEmail(formData.email)) {
        alert('Invalid email');
        return;
      }

      const result = await this.submitForm(formData);

      if (result.success) {
        console.log('Form submitted successfully!');
      }
    });
  }
};

// Initialization
document.addEventListener('DOMContentLoaded', () => {
  FormValidator.init();
});

Mixed Content HTML + CSS + JS

Use data-lang="mixed" to automatically highlight HTML containing <style> and <script> tags:

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      background-color: #f5f5f5;
      color: #333;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Hello World</h1>
    <p>This is a demo page.</p>
  </div>

  <script>
    // JavaScript gets highlighted too!
    const greeting = 'Hello from NoCSS';

    document.addEventListener('DOMContentLoaded', () => {
      console.log(greeting);

      const title = document.querySelector('h1');
      title.style.color = 'blue';
    });
  </script>
</body>
</html>

The tokenizer automatically detects CSS and JavaScript regions and applies appropriate highlighting for each language.

Features

No Classes or Inline Styles

Syntax highlighting works with:

A simple data-lang attribute on the <pre>
No CSS classes in HTML
No inline styles
Automatic tokenization on page load

Supported Languages

HTML/XML - Tags, attributes, comments
CSS - Selectors, properties, values, functions
JavaScript - Keywords, functions, strings, comments
Mixed - HTML with embedded CSS and JavaScript (use data-lang="mixed")

Adaptive Theme

Highlighting automatically adapts to dark mode using prefers-color-scheme.

Usage

To use syntax highlighting, simply add the data-lang attribute to your <pre> element:

<pre data-lang="html"><code>
  <!-- Your HTML code here -->
</code></pre>

<pre data-lang="css"><code>
  /* Your CSS code here */
</code></pre>

<pre data-lang="javascript"><code>
  // Your JavaScript code here
</code></pre>

<pre data-lang="mixed"><code>
  <!-- HTML with embedded <style> and <script> -->
</code></pre>

The NoCSS script will automatically detect code blocks and apply syntax highlighting without requiring classes or inline styles.