1. Como Usar

Integre o Y2Code em seu projeto em apenas 2 passos.

2. Uso Básico

Escreva seu código normalmente dentro de um <pre> com o atributo y2code="linguagem".

const soma = (a, b) => a + b;
console.log(soma(2, 3)); // 5

Para códigos que contêm tags (como HTML), use <script type="text/plain"> para evitar que o navegador interprete o código antes do realce.

3. JavaScript / TypeScript

Keywords, funções, strings, template literals, comentários, números, constantes.

// Classe com TypeScript
class UserService {
    private readonly users: Map = new Map();

    async findById(id: string): Promise {
        if (!id) throw new Error('ID obrigatório');
        return this.users.get(id) ?? null;
    }

    static create(data: Partial): User {
        return {
            id: crypto.randomUUID(),
            createdAt: new Date(),
            ...data
        };
    }
}

// Arrow functions + desestruturação
const { nome, idade = 18 } = usuario;
const ativo = idade >= 18 && nome !== null;

// Template literal
const msg = `Usuário ${nome} tem ${idade} anos.`;

4. CSS / SCSS

Seletores, propriedades, valores, variáveis, @-rules e cores.

/* Componente de Card com CSS custom properties */
@layer components {
    .crd {
        --cd-bg:  var(--y2-bg-sur);
        --cd-r:   var(--y2-r-m);
        --cd-pad: 2.4rem;

        background: var(--cd-bg);
        border-radius: var(--cd-r);
        padding: var(--cd-pad);
        transition: transform .2s, box-shadow .2s;
    }

    .crd.is-int:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
    }

    @media (max-width: 576px) {
        .crd { --cd-pad: 1.6rem; }
    }
}

5. HTML / Markup

Tags, atributos, valores e comentários.

6. JSON

Chaves, valores, types primitivos e aninhamento.

{
    "framework": "Y2",
    "version": "2.0.0",
    "modules": ["Y2Anime", "Y2Modal", "Y2Nav", "Y2Alert", "Y2Day", "Y2Ajax", "Y2Code"],
    "config": {
        "theme": "dark",
        "scale": "62.5%",
        "breakpoints": {
            "pp": 380,
            "p": 576,
            "m": 768,
            "g": 992,
            "gg": 1200
        }
    },
    "active": true,
    "license": null
}

7. PHP

Keywords, variáveis, funções, strings e comentários.

8. Bash / Shell

Keywords, variáveis, strings e comentários.

#!/bin/bash
# Deploy script - Y2 Framework

set -euo pipefail

APP_DIR="/var/www/y2"
BACKUP_DIR="/var/backups/y2"
DATE=$(date +%Y%m%d_%H%M%S)

echo "⚡Y⚡T Deploy Y2 - $DATE"

# Backup
if [ -d "$APP_DIR" ]; then
    tar -czf "$BACKUP_DIR/backup_$DATE.tar.gz" "$APP_DIR"
    echo "✓ Backup criado"
fi

# Pull + build
cd "$APP_DIR"
git pull origin main
npm ci --production
npm run build

# Restart
if command -v pm2 &> /dev/null; then
    pm2 restart y2
    echo "✓ PM2 reiniciado"
else
    echo "✗ só PM2 não encontrado"
fi

echo "✓ Deploy concluído"

9. Numeração de Linhas

Adicione lines no <pre> para ativar.

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

// Criar aplicação
const app = createApp(App);

// Plugins
app.use(router);
app.use(store);

// Mount
app.mount('#app');

console.log('?? App iniciado com sucesso!');

10. Temas

Use theme="..." no <pre> para definir o tema inicial. O botão no header cicla pelos 5 temas.

One Dark (padrão)

// One Dark - Atom inspired (Default)
async function fetchUser(id) {
    const res = await fetch(`/api/users/${id}`);
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return res.json(); // { id, name, email }
}

Palenight

// Palenight - Material inspired
async function fetchUser(id) {
    const res = await fetch(`/api/users/${id}`);
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return res.json(); // { id, name, email }
}

Dracula

// Dracula - Dark with vibrant accents
async function fetchUser(id) {
    const res = await fetch(`/api/users/${id}`);
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return res.json(); // { id, name, email }
}

11. Quick Reference