h1.

h1. Tutorial de Textile
h1. Introducere
_Textile_ este un limbaj de markup ce va ajuta sa editati paginile web. Ce inseamna aceasta? In loc sa scrieti tag-urile specifice de html pentru a edita o astfel de pagina, _Textile_ va pune la dispozitie o serie de elemente de sintaxa prin care puteti edita mai simplu si mult mai rapid aceste pagini. In continuare sunt prezentate notiunile care trebuiesc cunoscute inainte de a incepe scrierea unui pagini html folosind _Textile_.

Un text este structurat pe mai multe paragrafe. Atunci când folositi Textile, paragrafele trebuie separate de o linie alba ( goală ).

h1. Paragrafe
Un text este structurat pe mai multe paragrafe. Atunci cand folositi Textile, paragrafele trebuiesc separate de o linie alba ( goala ).

Un întreg paragraf se poate transforma cu usurinţă într-un header, folosind sintaxa {$hn$} la începutul paragrafului, unde {$n$} este un numar de la $1$ la $6$. De exemplu, _Textile_ va interpreta linia @h1. Primul header@ ca @<h1>Primul header</h1>@ şi rezultatul va fi:

table(example). |_. Cod _Textile_|_. Cod HTML asociat|
|Un paragraf      
   
Al doilea paragraf
|@<p>Un paragraf</p>@&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;
@<p>Al doilea paragraf</p>@|

h1. Primul header
h2. Modificatori

Un intreg paragraf se poate transforma cu usurinta intr-un header, folosind sintaxa {$hn$} la inceputul paragrafului, unde {$n$} este un numar de la $1$ la $6$. De exemplu, Textile va interpreta linia @h1. Primul header@ ca @<h1>Primul header</h1>@ si rezultatul va fi:

Pentru a scrie un text cu diferite efecte ( îngroşat, înclinat, subliniat, tăiat ) sau în diferite poziţii ( puteri sau indici ) se scrie textul care se doreşte a fi modificat între modificatorii corespunzători. În tabelul de mai jos este prezentat modul de folosire al acestora:

h1. Primul header

table(example). |_. Cod _Textile_|_. Cod HTML asociat|_. Rezultat |
|@**Un text îngroşat**@|@<b>Un text îngroşat</b>@|**Un text îngroşat**|
|@_Aici apare înclinat_@|@<i>Un text înclinat</i>@|_Aici apare înclinat_|
|@+Merge chiar şi subliniat+@|@<ins>Merge chiar şi subliniat</ins>@|+Merge chiar şi subliniat+|
|@-Text greşit-@|@<del>Text grşsit</del>@|-Text greşit-|
|@Pitagora: a^2^ + b^2^ = c^2^@|@Pitagora: a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>@|a^2^ + b^2^ = c^2^|
|@Chiar şi logaritmi: log ~2~ N@|@Chiar şi logaritmi: log<sub>2</sub> N@|log ~2~ N|

h1. Modificatori
Pentru a scrie un text cu diferite efecte ( ingrosat, inclinat, subliniat, taiat ) sau in diferite pozitii ( puteri sau indici ) se scrie textul care se doreste a fi modificat intre modificatorii corespunzatori. In tabelul de mai jos este prezentat modul de folosire al acestora:

În cazul in care rezultatele produse de limbajul de markup nu sunt cele aşteptate, se poate forţa folosirea acestor modificatori prin caracterele ${$ şi $}$ puse la începutul şi respectiv la sfârşitul secvenţei. De exemplu, @{**Text forţat**}@ are ca rezultat {**Text forţat**}.

table(example). |_. Cod _Textile_|_. Cod HTML asociat|
|@**Un text ingrosat**@|@<b>Un text ingrosat</b>@|
|@_Aici apare subliniat_@|@<i>Un text ingrosat</i>@|
|@+Merge chiar si subliniat+@|@<ins>Merge chiar si subliniat</ins>@|
|@-Text gresit-@|@<del>Text gresit</del>@|
|@Pitagora: a ^2^ + b ^2^ = c ^2^@|@Pitagora: a <sup>2</sup> + b <sup>2</sup> = c <sup>2</sup>@|
|@Chiar si logaritmi: log ~2~ N@|@Chiar si logaritmi: log <sub>2</sub> N@|

Printre aceste caractere speciale există şi @, care opreşte formatările speciale într-o secvenţă. Exemplu: @*capşună*@ are ca rezultat *capşună*. Daca asta nu funcţionează în pasajul tău poţi să foloseşti direct 'entităti HTML':http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references. Poţi să scrii *elefanţi* pentru a obtine *elefanţi*.

In cazul in care rezultatele produse de limbajul de markup nu sunt cele asteptate, se poate forta folosirea acestor modificatori prin caracterele { si } puse la inceputul si respectiv la sfarsitul secventei. De exemplu, @{**Text fortat**}@ are ca rezultat {**Text fortat**}.

h2. Liste

h1. Liste

Pentru a crea o lista numerică cu Textile, este suficient să inserăm $#$ înainte de fiecare paragraf:

Pentru a crea o lista numerica cu Textile, este suficient sa inseram # inainte de fiecare paragraf:

@# Primul item@
@# Al doilea item@

@# Al treile item@

@# Al treilea item@

va genera:

# Al doilea item
# Al treilea item

De asemenea este posibil ca listele să fie îmbrăcate, incrementând numarul de caractere $#$. Listele vor avea o structura arborescentă:

De asemenea este posibil ca listele sa fie imbricate, incrementand numarul de caractere #. Listele vor avea o structura aborescenta:

@# Un item@
@## Alt item@

@### Alt item@

@# Al doilea item@

va genera :

va avea ca rezultat:

# Un item
## Alt item

### Alt item

# Al doilea item

Dacă în locul listelor indexate numeric se doreşte crearea listelor cu bulete ( _bulleted lists_ ), în loc de $#$ se va folosi $*$. Regula pentru liste îmbrăcate rămâne valabilă şi aici:

Daca in locul listelor indexate numeric se doreste creerea listelor cu bulete ( _bulleted lists_ ), in loc de # se va folosi *. Regula pentru liste imbricate ramane valabila si aici:

@* Capitolul 1@
@** Capitolul 1.1@

@*** Capitolul 1.1.1@

@* Capitolul 2@

produce următorul efect :

produce urmatorul efect:

* Capitolul 1
** Capitolul 1.1

*** Capitolul 1.1.1

* Capitolul 2

h2. Referinţe externe

h1. Referinte externe

Pentru a crea o referinţă către un alt site ( un _link_ ), textul descriptiv va fi plasat între ghilimele duble ($"$), urmat imediat de caracterul $:$ si de URL-ul dorit: @Link către "infoarena":http://infoarena.ro@ va fi interpretat ca "Link către "infoarena":http://infoarena.ro". Dacă un link este folosit de mai multe ori în acelaşi document sau dacă se doreşte o mai bună organizare a textului, este posibil ca URL-ul să fie specificat oriunde în document: între paranteze pătrate se va afla identificatorul unic asociat linkului, dupa care urmează adresa propriu-zisă. În momentul în care dorim să inserăm în document acel link este suficient în loc de adresa completă să introducem doar identificatorul pe care l-am asociat adresei :

Pentru a crea o referinta catre un alt site ( un _link_ ), textul descriptiv va fi plasat intre ghilimele duble ("), urmat imediat de caracterul : si de URLul dorit: @Link catre "infoarena":http://infoarena.ro@ va fi interpretat ca Link catre "infoarena":http://infoarena.ro. Daca un link este folosit de mai multe ori in acelasi document sau daca se doreste o mai buna organizare a textului, este posibil ca URLul sa fie specificat oriunde in document: intre paranteze patrate se va afla identificatorul unic asociat linkului, dupa care urmeaza adresa propriu-zisa. In momentul in care dorim sa inseram in document acel link este suficient in loc de adresa completa sa introducem doar identificatorul pe care l-am asociat adresei:

@Link către "infoarena":arena@
@Al doilea link către "infoarena":arena@

@Link catre "infoarena":arena@
@Al doilea link catre "inforarena":arena@

@[arena]http://infoarena.ro@
are rezultatul:

Link către "infoarena":arena
Al doilea link către "infoarena":arena

Link catre "infoarena":arena
Al doilea link catre "inforarena":arena

[arena]http://infoarena.ro

Pentru a posta o imagine pe site, este necesar în prealabil să o salvaţi pe server. Pentru aceasta este suficient să apasaţi butonul $Ataşează$ din colţul dreapta-sus al paginii pe care o editaţi şi să selectati imaginea pe care doriţi să o transferaţi pe server. După aceea, pentru a introduce imaginea în pagină va trebui să introduceţi URL-ul ei între semnul exclamării ($!$).
 
Dacă am încărcat deja imaginea logo.jpg in pagină curentă,
@!documentatie/textile?logo.jpg!@ va avea rezultatul :
 
!documentatie/textile?logo.jpg!
 
h2. Tabele
 
Tabelele simple pot fi construite separând câmpurile lor prin caracterul $|$.

Pentru a posta o imagine pe site, este necesar in prealabil sa o salvati pe server. Pentru aceasta este suficient sa apasati butonul "Ataseaza" din coltul dreapta-sus al paginii pe care o editati si sa selectati imaginea pe care doriti sa o transferati pe server. Dupa aceea, pentru a introduce imaginea in pagina va trebui sa introduceti URLul ei intre semnul exclamarii (!).

@| nume | vârstă | judeţ |@
@| Popescu | 24 | Bucureşti |@
@| Ionescu | 12 | Constanta |@

h1. Tabele
Tabelele simple pot fi construite separand campurile lor prin caracterul |.
==| nume | varsta | judet |
| popescu | 24 | bucuresti |
| ionescu | 12 | constanta |
| petrescu | 50 | galati |==

va genera tabelul de mai jos:

 
| nume | vârstă | judeţ |
| Popescu | 24 | Bucureşti |
| Ionescu | 12 | Constanta |
 
Celulele care doresc să fie făcute cap de tabel vor fi marcate iniţial printr-un _underscore_, urmat imediat de un punct.
 
@|_. nume |_. vârstă |_. judeţ |@
@| Popescu | 24 | Bucureşti |@
@| Ionescu | 12 | Constanta |@
 

| nume | varsta | judet |
| popescu | 24 | bucuresti |
| ionescu | 12 | constanta |
| petrescu | 50 | galati |
Celulele care doresc sa fie facute cap de tabel vor fi marcate initial printr-un underscore, urmat imediat de un punct: "_." .
==| _.nume | _.varsta | _.judet |
| popescu | 24 | bucuresti |
| ionescu | 12 | constanta |
| petrescu | 50 | galati |==

va avea urmatorul rezultat:

| _.nume | _.varsta | _.judet |
| popescu | 24 | bucuresti |
| ionescu | 12 | constanta |
| petrescu | 50 | galati |

|_. nume |_. vârstă |_. judeţ |
| Popescu | 24 | Bucureşti |
| Ionescu | 12 | Constanta |
 
h1. Cod <tex>\LaTeX</tex>
 
Atunci când dorim să introducem cod 'LaTeX':http://en.wikipedia.org/wiki/LaTeX putem folosi sintaxa:
$&lt;tex> cod LaTeX </tex&gt;$
 
De exemplu pentru codul:
 
$&lt;tex>$ @d = \frac{m_0^3}{\sqrt{3-\frac{v^2}{c^2}}} + \sqrt[3]{a^2 + b^2} - \log_3 \cos \frac{\pi}{3}@ $</tex&gt;$

Atributele celulelor

se obţine următoarea imagine:

(TODO): Copy from buru.

<tex> d = \frac{m_0^3}{\sqrt{3-\frac{v^2}{c^2}}} + \sqrt[3]{a^2 + b^2} - \log_3 \cos \frac{\pi}{3}</tex>

Pentru reguli generale despre regulile de formatare ale limbajului Textile accesati acest link: "http://hobix.com/textile/":http://hobix.com/textile/
*ATENTIE!* Evitati folosirea codului HTML in cadrul Textile.

h2. Fragmente de cod

h3. Fragmente de cod

Atunci când dorim să inserăm un fragment de cod în pagina curentă, putem să folosim sintaxa:
 
@== code(limbaj) |@

@== code(c) |@

@...fragment de cod...@
{@==@}

Următoarele limbaje sunt suportate:

Urmatoarele limbaje sunt suportate:

* $code({@c@})$ pentru $C$
* $code(cpp)$ pentru $C++$
* $code(pas)$ pentru $Free Pascal$
* $code(java)$ pentru $Java$

* $code{@(c)@}$ pentru C
* $code(cpp)$ pentru C++
* $code(pas)$ pentru Object Pascal
* $code(java)$ pentru Java

Iată un exemplu:

Iata un exemplu:

== code(c) |

# include <stdio.h>
 
int a, b ;
 
int main ( void ) {
    fscanf ( fopen ( "adunare.in", "r" ), "%d %d", &a, &b ) ;
    fprintf ( fopen ( "adunare.out", "w" ), "%d", a + b ) ;

#include <stdio.h>

    return 0 ;
}
==
 
== code(cpp) |
# include <fstream>

int main(void) {
    int a, b;

int a, b ;

    freopen("adunare.in", "rt", stdin);
    freopen("adunare.out", "rt", stdout);

int main ( void ) {
    std :: ifstream f ( "adunare.in" ) ;
    std :: ofstream g ( "adunare.out" ) ;

    scanf("%d%d", &a, &b);
    printf("%d\n", a+b);

    f >> a >> b ;
    g << a + b ;

    return 0;

}

==
 
== code(pas) |
program adunare ;
 
var a, b : longint ;
 
    begin
        freopen ( input, 'adunare.in' ) ; reset ( input ) ;
        freopen ( output, 'adunare.out' ) ; rewrite ( output ) ;
        readln ( a, b ) ;
        writeln ( a + b ) ;
        close ( input ) ; close ( output ) ;
    end.
==
 
h2. Aplicarea stilurilor $CSS$
 
Este posibil să ataşăm cod $CSS$ elementelor in felul urmator:
 
table(example). |_. Cod _Textile_|_. Cod HTML asociat|_. Rezultat |
|@text %{color:red}bau!% text@|@text <span style="color:red">bau!</span> text@|text %{color:red;}bau!% text|

==

protected

public