CodeDye · Live Playground

🚀 Quick Start

Include any CodeDye theme and the UMD bundle — highlighting runs automatically on DOMContentLoaded.

<!-- 1) Include a theme (dark or light) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Tezumie/codedye@main/dist/themes/vs-code-dark.css">

<!-- 2) Include the CodeDye core script -->
<script src="https://cdn.jsdelivr.net/gh/Tezumie/codedye@main/dist/builds/codedye.all.umd.js"></script>

⚡ Live Preview Setup

Use highlightElement() to convert raw code into highlighted HTML.


// 1. Get references
const textarea = document.getElementById('source');
const preview = document.getElementById('highlightedCode');

// 2. Render on input
textarea.addEventListener('input', () => {
const html = CodeDye.highlightElement(textarea.value, { language: 'js' });
preview.innerHTML = html.replace(/^<code[^>]*>|<\/code>$/g, '');
});

This gives you full control and is perfect for overlay-style editors.

📦 Other CodeDye API Helpers

CodeDye.highlight() — highlight all <code class="language-…" /> blocks automatically.
CodeDye.highlightBlock(el) — highlight a specific DOM element in-place.
CodeDye.highlightElement(code, opts) — highlight a string of code and return highlighted HTML.

All are powered by a Monaco-style tokenizer with theme support built in.

Static Examples

HTML


<!DOCTYPE html>
<html lang="en">
   <head>
   <title>Playground Page</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="stylesheet" href="styles.css" />
   <style>
      body {
         font-family: 'Comic Sans MS', cursive;
         background: #f0f8ff;
      }
      .highlight-example {
         background: #fff8dc;
         border: 2px dashed #ffa;
         border-radius: 10px;
      }
   </style>
</head>
<body>
   <div class="highlight-example">
      <h1>✨ Welcome to the Code Playground! ✨</h1>       
      <script>
         // When the page loads, say hi in the console 🐾
         document.addEventListener('DOMContentLoaded', () => {
         console.log("✨ Playground ready!");
         });
      </script>
   </div>
</body>
</html>

CSS


/* 🐶 Dog-themed styles for a pawsome UI */
.dog-card {
   background: #f9f6f2;
   border-radius: 12px;
   box-shadow: 0 4px 8px rgba(0,0,0,0.1);
   padding: 1rem;
   transition: transform 0.3s ease;
}

.puppy {
   color: #8d6e63;
   font-size: 18px;
   font-weight: bold;
}

.puppy:hover {
   color: #6d4c41;
   transform: scale(1.05); /* Zoom in when hovered */
}

/* Tail-wagging animation (so cute!) */
@keyframes wag-tail {
   0% { transform: rotate(-10deg); }
   50% { transform: rotate(10deg); }
   100% { transform: rotate(-10deg); }
}

JavaScript


// 🐾 A playful Dog class with some tricks!
class Dog {
   constructor(name, breed) {
      this.name = name;
      this.breed = breed;
      this.isGoodBoy = true;
   }

   bark() {
      console.log(`${this.name}: Woof woof! 🐕`);
      return "🐾";
   }

   fetch(item) {
      // Only fetches approved toys!
      const toyPattern = /^(ball|stick|frisbee)$/;
      return toyPattern.test(item) ? `fetched ${item}! 🎾` : "not interested... 💤";
   }
}

// 🐶 Meet Rex the Labrador!
const rex = new Dog("Rex", "Labrador");
rex.bark();         // Logs a happy bark
rex.fetch("ball");  // Returns "fetched ball! 🎾"

Python


import math

class Circle:
      def __init__(self, r):
         self.r = r

      def area(self):
         return math.pi * self.r ** 2

def describe(shape):
      if hasattr(shape, 'area'):
         print(f"Area: {shape.area():.2f}")
      else:
         print("Not a valid shape.")

# 🎯 Run demo
c = Circle(3)
describe(c)

Markdown


# Markdown Playground

Welcome to the **Markdown** test page! Here's what you can try:

## ✨ Basic Formatting

- *Italic* text  
- **Bold** text  
- ***Bold & Italic*** text  
- ~~Strikethrough~~

## ✅ Lists

### Unordered:
- Apple

### Ordered:
1. First

## 🧾 Blockquote

> Markdown is lightweight & easy to use!

## 💻 Inline Code

Here’s some `inline code` in a sentence.

## 🧱 Code Block

```html
<!DOCTYPE html>
<html lang="en">
   <head>
   <title>Playground Page</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="stylesheet" href="styles.css" />
   <style>
      body {
         font-family: 'Comic Sans MS', cursive;
         background: #f0f8ff;
      }
      .highlight-example {
         background: #fff8dc;
         border: 2px dashed #ffa;
         border-radius: 10px;
      }
   </style>
</head>
<body>
   <div class="highlight-example">
      <h1>✨ Welcome to the Code Playground! ✨</h1>       
      <script>
         // When the page loads, say hi in the console 🐾
         document.addEventListener('DOMContentLoaded', () => {
         console.log("✨ Playground ready!");
         });
      </script>
   </div>
</body>
</html>
```


```python
def hello(name):
      return f"Hello, {name}!"
```


## 🧬 HTML inside Markdown

<p style="color:lightgreen; font-weight: bold;">
  👋 This is a custom HTML paragraph!
</p>

<hr />


That’s it — happy testing!

JSON


{
   "name": "John Doe",
   "age": 30,
   "isAdmin": false,
   "favorites": {
      "color": "blue",
      "food": "pizza",
      "numbers": [
         1,
         2,
         3,
         42.5
      ]
   },
   "address": null,
   "settings": {
      "notifications": true,
      "theme": "dark",
      "complexNumber": 500
   },
   "emptyArray": [],
   "nestedObject": {
      "a": {
         "b": {
         "c": "deep"
         }
      }
   }
}