SWCode Componentes

O que é

Exibe blocos de código com realce de sintaxe em tempo real, numeração de linhas, 5 temas e cópia com 1 clique — com suporte a escrita direta (no-escape) para você não precisar ficar convertendo < em < manualmente.

Como funciona

Para linguagens normais (JS, CSS, JSON, Bash), basta colar o código direto no <pre swcode="...">. Para linguagens com tags (HTML e PHP), basta envolver o código dentro de uma tag <script type="text/plain">: o SWCode extrai o texto puro e colore automaticamente sem que o navegador execute ou quebre o markup.

Exemplos

// Classe assíncrona
class UsuarioAPI {
  async buscar(id) {
    try {
      const res = await fetch(`/api/usuarios/${id}`);
      const dados = await res.json();
      console.log('Usuário:', dados.nome);
      return dados;
    } catch (erro) {
      console.error('Erro na requisição:', erro);
    }
  }
}

<pre swcode="js" swcode-lines><code>// Classe assíncrona
class UsuarioAPI {
  async buscar(id) {
    try {
      const res = await fetch(`/api/usuarios/${id}`);
      const dados = await res.json();
      console.log('Usuário:', dados.nome);
      return dados;
    } catch (erro) {
      console.error('Erro na requisição:', erro);
    }
  }
}</code></pre>

<p class="docs-section-note" style="margin:0 0 1rem;font-size:.88rem;color:var(--text-muted);">Escreva HTML/PHP <b>direto</b>, com <code>&lt;</code> e <code>&gt;</code> de verdade — sem converter nada em <code>&amp;lt;</code>/<code>&amp;gt;</code> na mão. É só envolver o código dentro de um <code>&lt;script type="text/plain"&gt;</code>, dentro do <code>&lt;pre swcode&gt;</code>: o navegador nunca tenta renderizar aquilo como DOM real, e o SWCode extrai o texto puro e realça sozinho.</p>
<pre swcode="html" swcode-lines><script type="text/plain">
<div class="sw-modal" id="modalExemplo">
  <div class="sw-modal-box">
    <button class="sw-modal-close" aria-label="Fechar">&times;</button>
    <h3>Título do Modal</h3>
    <p>Conteúdo da janela flutuante com suporte a temas.</p>
  </div>
</div>
</script></pre>

<div class="sw-modal" id="modalExemplo">
  <div class="sw-modal-box">
    <button class="sw-modal-close" aria-label="Fechar">&times;</button>
    <h3>Título do Modal</h3>
    <p>Conteúdo da janela flutuante com suporte a temas.</p>
  </div>
</div>

<pre swcode="html" swcode-lines><code>&lt;div class="sw-modal" id="modalExemplo"&gt;
  &lt;div class="sw-modal-box"&gt;
    &lt;button class="sw-modal-close" aria-label="Fechar"&gt;&amp;times;&lt;/button&gt;
    &lt;h3&gt;Título do Modal&lt;/h3&gt;
    &lt;p&gt;Conteúdo da janela flutuante com suporte a temas.&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>

<?php
namespace App\Controllers;

class HomeController extends BaseController {
    public function index(): string {
        $titulo = "Bem-vindo ao SWCore!";
        $totalComponentes = 65;
        return view('home', compact('titulo', 'totalComponentes'));
    }
}

<pre swcode="php" swcode-theme="dracula" swcode-lines><code>&lt;?php
namespace App\Controllers;

class HomeController extends BaseController {
    public function index(): string {
        $titulo = "Bem-vindo ao SWCore!";
        $totalComponentes = 65;
        return view('home', compact('titulo', 'totalComponentes'));
    }
}</code></pre>

:root {
  --color-primary: #38bdf8;
  --surface-card: #1a2636;
  --border: #3e5771;
}

.meu-card {
  display: flex;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1.5rem;
  transition: transform 0.25s ease;
}

<pre swcode="css"><code>:root {
  --color-primary: #38bdf8;
  --surface-card: #1a2636;
  --border: #3e5771;
}

.meu-card {
  display: flex;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1.5rem;
  transition: transform 0.25s ease;
}</code></pre>

{
  "nome": "SWCore",
  "versao": "0.1.0",
  "componentes": 65,
  "zeroDependencias": true,
  "modulos": ["interface", "animacao", "icones", "swcode"]
}

<pre swcode="json" swcode-theme="monokai"><code>{
  "nome": "SWCore",
  "versao": "0.1.0",
  "componentes": 65,
  "zeroDependencias": true,
  "modulos": ["interface", "animacao", "icones", "swcode"]
}</code></pre>

# Instalação rápida via NPM / Script
git clone https://github.com/sanweb/swcore.git
cd swcore
npm install
node build.js

<pre swcode="bash"><code># Instalação rápida via NPM / Script
git clone https://github.com/sanweb/swcore.git
cd swcore
npm install
node build.js</code></pre>

Atributos

Variantes