Tot ce trebuie să știți despre elementul "pre" al site-ului HTML - SitePoint

Pre-elementul HTML este o modalitate simplă și semantică de afișare a conținutului formatat (cum ar fi codul sursă), dar are câteva ciudățenii. Să vorbim despre modul în care funcționează acest element, problemele potențiale pe care trebuie să le țineți minte, precum și câteva sfaturi și trucuri de bază pentru îmbunătățirea acestuia.

Cum <pre> Lucrări

Într - un document HTML, pre elementul reprezintă text preformatat. Aceasta înseamnă că indicele tău, spații duble, linii noi și alte formatări tipografice vor fi păstrate în interiorul unui pre element.

Implicit, browserele vor afișa conținutul în interiorul unui pre utilizând un font monospațiat (sau cu lățime fixă), cum ar fi Courier sau Monaco. Acest lucru este tipic atunci când se afișează un cod, care, după cum vom vedea, este una dintre utilizările primare pentru pre element.

Să examinăm un exemplu de text preformat.

Exemplul de text preformat

Dacă ați plasa același text într-un alt element, spuneți a div, toate spațiile suplimentare, liniile noi și indentarea vor fi ignorate. Deci, chiar dacă codul dvs. va arăta astfel:

<div>Jack: Hello. How are you?Jill: I'm great. Thanks for asking.</div>

Browserul o va face astfel:

Vezi elementul Pen Div ignoră spațiul alb prin SitePoint (@SitePoint) pe CodePen.

Același bloc de text din interiorul a pre, cu toate acestea, va fi redat cu un font monospațial și cu tot spațiul dvs. extra alb intact:

<pre>Jack: Hello. How are you?Jill: I'm great. Thanks for asking.</pre>

Vedeți Pen IpECf de SitePoint (@SitePoint) pe CodePen.

Marcarea codului sursă în direcția corectă

pre elementul ar trebui să fie utilizat pentru textul care are formatare tipografică care afectează semnificația conținutului, cum ar fi în poezii, artă ASCII, transcrieri și, desigur, codul computerului.

Dacă doriți să reprezentați un bloc de cod sursă în documentul dvs. HTML, ar trebui să utilizați un element de cod imbricat în interiorul unui pre element. Acest lucru este semantic și, din punct de vedere funcțional, vă oferă posibilitatea de a informa crawlerele din motoarele de căutare, aplicațiile sociale, cititoarele RSS și alte servicii web interoperabile care conțin codul de computer.

Iată un exemplu de fragment de JavaScript marcat semantic:

<pre><code>// Logs &quot;Hello World!&quot;// in the browser's developer consoleconsole.log(&quot;Hello World!&quot;);</code></pre>

Vedeți exemplul Pen de pre cu etichete de cod prin SitePoint (@SitePoint) pe CodePen.

Utilizarea elementelor HTML înnoite

Puteți utiliza și alte elemente HTML în cadrul dvs. pre elemente și vor fi redate corespunzător.

Doar pentru a demosta conceptul, am marcat un JavaScript cu em și puternic elemente, și chiar a dat elementele imbricate culoare proprietati folosind stil atribut.

<pre><code>var total = 0;<em style="color: green;">// Add 1 to total and display in a paragraph</em><strong style="color: blue;">document.write('&lt;p&gt;Sum: ' + (total + 1) + '&lt;/p&gt;');</strong></code></pre>

Consultați elementul Pen Pre cu etichete imbricate pentru stilul de sitePoint (@SitePoint) pe CodePen.

Probleme

Acum că am discutat cum pre elementul de lucru, să trecem peste câteva potențiale dureri de cap pe care le-ați putea întâlni când o utilizați.

revarsarile

Implicit, textul este înăuntru pre elementele sunt afișate așa cum este în sursă, având astfel o linie de text mai mare decât lățimea conținutului pre element va însemna că linia va ieși din containerul său.

Mai jos este un aspect al paginii cu un anumit conținut care se deplasează în afara conținutului pre element.

Vedeți exemplul Pen de pre element care rupe aspectul prin SitePoint (@SitePoint) pe CodePen.

În planșele cu mai multe coloane și în special în planurile bazate pe flotare, problemele de depășire sunt mai devastatoare dacă nu sunt tratate proactiv deoarece pot afecta serios structura prin împingerea coloanelor adiacente în jos pe pagină în locuri unde nu ar trebui să fie .

Există câteva soluții la această problemă.

Soluția 1: Afișați o bară de derulare

O modalitate de a evita problemele de depășire este afișarea unei bare de derulare ori de câte ori conținutul pre element este prea larg. Aceasta se face prin atribuirea elementului overflow: auto în CSS.

pre { overflow: auto;}

Consultați Pen FIxing cu element pre-element cu overflow: auto prin SitePoint (@SitePoint) pe CodePen.

În această soluție, utilizatorul va trebui să deruleze pe orizontală pentru a vedea tot conținutul din interiorul lui pre. Dar, pentru a spune ușor, derularea orizontală nu este o experiență ideală de citire. În plus, și acest lucru este subiectiv, o bară de derulare nu este plăcută din punct de vedere estetic.

Există un alt mod de abordare pre overflow.

Soluția 2: Text-wrapping

Suntem obișnuiți să codificăm codul sursă la următoarea linie dacă este mai extinsă decât fereastra editorului nostru de cod. Nu ar fi neobișnuit să portăm această convenție pe Web.

Ambalarea textului se poate face folosind spatiu alb Proprietatea CSS. Există o valoare nifty pentru spatiu alb care funcționează bine pentru preelemente: pre-wrap.

pre { spațiu alb: spațiu prealabil;}

Consultați stiloul care utilizează Pre-wrap pentru a remedia elementul pre-element prin SitePoint (@SitePoint) pe CodePen.

Rendering HTML

Există un anumit tip de cod sursă care este un pic mai dificil de a lucra cu un interior pre element: HTML. Înainte, ți-am spus că poți să inserezi elemente HTML înăuntru pre elemente. Dar dacă am vrea să afișăm aceste etichete în codul afișat, astfel încât cititorul să le poată vedea?

Pentru a afișa etichete HTML în browser, va trebui de obicei să scape de caracterele HTML rezervate. Să presupunem că am vrut să arătăm următoarea marcaj în interior pre Etichete:

Renderați marcarea HTML în pre element

Pentru a face din interiorul a pre element verbatim, putem scăpa de multe dintre caracterele HTML rezervate, cum ar fi <, >, și " la entitățile lor de caractere corespunzătoare, așa cum se întâmplă (deși citatele și parantezele de închidere din punct de vedere tehnic nu trebuie să fie scăpate):

<pre><code>&lt;nav class=&quot;main-navigation&quot;&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=&quot;/&quot;&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;about.html&quot;&gt;About Us&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;contact.html&quot;&gt;Contact Us&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt;</code></pre>

Consultați elementul Pen Pre cu etichete HTML (entități) scoase de SitePoint (@SitePoint) pe CodePen.

Din fericire, există multe instrumente care vă vor ajuta să faceți acest lucru. Există, de exemplu, Free Online Escape Tool.

Spațierea accidentală

O altă problemă care trebuie urmărită este apariția filelor nedorite, a liniilor noi și a spațiilor.

Mulți dintre noi indentăm codul HTML pentru a ilustra ierarhia elementelor de nivel bloc. Acest lucru poate fi problematic cu pre elemente dacă nu suntem atenți. Lasă-mă să-ți arăt ce vreau să spun.

Dacă documentul HTML a avut următoarea ierarhie structurală (filele pentru a reprezenta elementele copil imbricate), my pre Elementul va fi aliniat după cum urmează:

<html> <head> <title>My tutorial</title> </head> <body> <section> <article class="main-content"> <h1>My Tutorial's Title</h1> <p>Here's some example JavaScript:</p> <!-- My pre element --> <pre><code>&lt;script type=&quot;text/javascript&quot;&gt; console.log('Hello there'); &lt;/script&gt;</code></pre> </article> </section> </body></html>

În exemplul de mai sus, pre element este de patru niveluri adânc în ierarhia documentului.

Problema este pre elementul (pe bună dreptate) presupune că indentările mele fac parte din conținutul său și astfel conținutul este afișat cu filele nedorite care preced fiecare linie:

<script type="text/javascript"> console.log('Hello there'); </script>

Pentru a descrie cu exactitate conținutul vizual, va trebui să o scriu astfel pre Elementul nu are file și alte caractere de spațiere în partea stângă a liniilor. Cu alte cuvinte, conținutul nu ar trebui să fie indisolubil:

<html> <head> <title>My tutorial</title> </head> <body> <section> <article class="main-content"> <h1>My Tutorial's Title</h1> <p>Here's some example JavaScript:</p> <!-- My pre element --> <pre><code>&lt;script type=&quot;text/javascript&quot;&gt;console.log('Hello there');&lt;/script&gt;</code></pre> </article> </section> </body></html>

Acum, conținutul se va face astfel:

<script type="text/javascript"> console.log('Hello there');</script>

Un model de marcaj

Pentru a evita problemele cu totul, vă sugerăm să utilizați acest model de marcare:

<pre><code>Line 1 (first line)Line 2Line 3Line 4 (last line)</code></pre>

Îmbunătățiri

Iată câteva lucruri pe care le puteți face pentru a vă îmbunătăți situația pre elemente.

Modificați dimensiunea filei

Puteți personaliza mărimea tălpilor dinăuntru pre elemente.

De exemplu, personal, eu urmăresc convenția unei tab-uri = două spații (folosind spațiile în loc de tab-uri este adesea denumită "file soft"), așa cum se face în Bootstrap și multe alte proiecte open source.

Însă dimensiunea implicită a filelor în browsere este echivalentul a opt spații sub specificații, lucru care nu funcționează bine pentru dezvoltatorii din front-end, mai ales în ceea ce privește citirea codului sursă HTML, deoarece ne găsim de multe ori lucrătoare cu structuri profund imbricate.

O modalitate de a modifica dimensiunea tabelului este prin numele intuitiv tab-size Proprietatea CSS. Este o proprietate nouă, deci nu va fi 100% susținută, dar este o mică îmbunătățire progresivă pentru utilizatorii care folosesc browserele moderne.

pre { tab-dimensiune: 2;}

Utilizați Fonturi Web monospațiate

Pentru un control mai bun al tipografiei noastre, este o idee bună să facem textul paginii web folosind CSS @ Font-face și fonturile pe care le-am ales, în loc de ceea ce consideră că browserul este bun pentru designul nostru. De asemenea, folosirea fonturilor monospațiate pe internet este atât de plictisitoare.

Iată un exemplu de utilizare a fontului PT Mono difuzat prin intermediul Fonturilor Google.

Consultați Penul Utilizând fontul PT Mono într-un element pre-element de SitePoint (@SitePoint) pe CodePen.

Îmbunătățirea lizibilității și esteticii prin evidențierea sintaxelor

Una dintre cele mai ușoare îmbunătățiri pe care le putem implementa cu noi pre conținut este subliniind sintaxa. Face codul mai ușor de citit și de înțeles. În plus, face designul nostru un pic mai vibrant.

Mai jos sunt câteva exemple de evidențiere a sintaxelor bazate pe pre element.

prismă

highlight.js

Există tone de indicatoare de sintaxă și se pare că în fiecare zi există un nou strălucitor care iese. Există, de asemenea, o multitudine de metode pentru punerea în aplicare a sintaxei evidențiind pe o pagină web - pluginuri JavaScript, clase PHP, pietre Rails, îl numiți - așa că vă las să vă dați jos celui care se potrivește cel mai bine nevoilor dvs. De exemplu, dacă doriți să utilizați un plugin jQuery, verificați această listă cu zece pluginuri de evidențiere a sintaxelor de către Sam Deering.

Performanța sublinierii sintaxelor

De asemenea, ar trebui să menționez că evidențierea sintaxei poate fi foarte impozabilă pe performanța web. Atunci când utilizați o bibliotecă din partea clientului, de exemplu, va fi de obicei o mulțime de potrivire a expresiilor regulate și manipulare DOM care se întâmplă pe conținutul care se află în interiorul pre Etichete; și știți deja că aceste procese pot afecta serios timpul de răspuns al paginilor web. Deci, acesta este doar un memento prietenos pentru a vă profila paginile dvs. web după implementarea unui marcator de sintaxă pentru a vedea dacă costul de performanță este rezonabil.

Înfășurarea în sus

Am vorbit foarte mult despre pre element - cum să îl folosiți, lucruri pe care să le urmăriți și căi prin care puteți să-i îmbunătățiți implementarea - și probabil că ați învățat un truc sau două despre el pe care nu l-ați cunoscut înainte. Dacă aveți alte sfaturi și trucuri despre pre, vă rugăm să le împărtășiți cu noi în comentarii.

Faceți cunoștință cu autorul

4.3
Evaluare totală: 31
5
13
4
1
3
2
2
3
1
1