Atenţie! Aceasta este o versiune veche a paginii, scrisă la 2010-11-25 17:36:14.
Revizia anterioară   Revizia următoare  

Tutorial de formatare Textile

Introducere

Textile este un limbaj de markup ce vă ajută să editaţi paginile web. Ce înseamnă aceasta? În loc să scrieţi tag-urile specifice de HTML pentru a edita o astfel de pagină, Textile vă pune la dispoziţie o serie de elemente de sintaxă prin care puteţi edita mai simplu si mult mai rapid aceste pagini. În continuare sunt prezentate noţiunile care trebuie cunoscute înainte de a începe scrierea unei pagini HTML folosind Textile.

Paragrafe

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

Cod TextileCod HTML asociat
Un paragraf      
   
Al doilea paragraf
<p>Un paragraf</p>      
   
<p>Al doilea paragraf</p>

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:

Primul header

Modificatori

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:

Cod TextileCod HTML asociatRezultat
**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>a2 + b2 = c2
Chiar şi logaritmi: log ~2~ NChiar şi logaritmi: log<sub>2</sub> Nlog 2 N

Î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.

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. Poţi să scrii *elefanţi* pentru a obtine *elefanţi*.

Liste

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

# Primul item
# Al doilea item
# Al treilea item

va genera:

  1. Primul item
  2. Al doilea item
  3. Al treilea item

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

# Un item
## Alt item
### Alt item
# Al doilea item

va genera :

  1. Un item
    1. Alt item
      1. Alt item
  2. 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:

* Capitolul 1
** Capitolul 1.1
** Capitolul 1.1.1
* Capitolul 2

produce următorul efect :

  • Capitolul 1
    • Capitolul 1.1
      • Capitolul 1.1.1
  • Capitolul 2

Referinţe 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". 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 :

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

http://infoarena.ro

are rezultatul:

Link către infoarena
Al doilea link către infoarena

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 :

Tabele

Tabelele simple pot fi construite separând câmpurile lor prin caracterul |.

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

va genera tabelul de mai jos:

numevârstăjudeţ
Popescu24Bucureşti
Ionescu12Constanta

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 |

va avea urmatorul rezultat:

numevârstăjudeţ
Popescu24Bucureşti
Ionescu12Constanta

Cod \LaTeX

Atunci când dorim să introducem cod LaTeX putem folosi sintaxa:
<tex> cod LaTeX </tex>

De exemplu pentru codul:

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

se obţine următoarea imagine:

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

Fragmente de cod

Atunci când dorim să inserăm un fragment de cod în pagina curentă, putem să folosim sintaxa:

== code(c) |
...fragment de cod...
==

Următoarele limbaje sunt suportate:

  • code(c) pentru C
  • code(cpp) pentru C++
  • code(pas) pentru Free Pascal
  • code(java) pentru Java

Iată un exemplu:

# include <cstdio>

int a, b ;

int main ( void ) {
    fscanf ( fopen ( "adunare.in", "r" ), "%d %d", &a, &b ) ;
    fprintf ( fopen ( "adunare.out", "w" ), "%d\n", a + b ) ;

    return 0 ;
}

Aplicarea stilurilor CSS

Este posibil să ataşăm cod CSS elementelor in felul urmator:

Cod TextileCod HTML asociatRezultat
text %{color:red}bau!% texttext <span style="color:red">bau!</span> texttext bau! text