1. Como Usar

Integre o SWCode em seu projeto em apenas 2 passos.

<!-- No Head -->
<link rel="stylesheet" href="dist/sw.min.css?v=8">

<!-- No final do Body -->
<script src="dist/sw.min.js?v=8"></script>

2. Uso Básico

Escreva seu código normalmente dentro de um <pre> com o atributo swcode="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(--sw-bg-sur);
        --cd-r:   var(--sw-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, tipos primitivos e aninhamento.

{
    "framework": "SW",
    "version": "0.0.1",
    "modules": ["SWTrans", "SWModal", "SWAlert", "SWDay", "SWAjax", "SWCode"],
    "config": {
        "theme": "dark",
        "scale": "62.5%",
        "breakpoints": {
            "p": 576,
            "m": 768,
            "g": 1024,
            "gg": 1280
        }
    },
    "active": true,
    "license": "MIT"
}

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 - SW Framework

set -euo pipefail

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

echo "⚡SW⚡ Deploy SW Framework - $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

echo "✓ Deploy concluído com sucesso"

9. Numeração de Linhas

Adicione swcode-lines no <pre> para ativar.

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

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

// Plugins
app.use(router);

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

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

10. Temas

Use swcode-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