Norėdami tvarkingai įdėti kodą į HTML programavimo svetainę, kad naršyklė jo nevykdytų, o rodytų kaip tekstą, naudokite specialias HTML žymes ir
simbolius.

Pagrindinis būdas (Teksto eilutė vs Blokas)

• Eilutės viduje (Inline): Naudokite <code> žymę, kai norite įterpti trumpą kodo fragmentą pačiame sakinyje.
• Kodo blokas: Kombinuokite <pre> ir <code> žymes, kad išlaikytumėte kodo formatavimą, tarpus ir naujas eilutes.

HTML pavyzdys:

<p>Norėdami sukurti kintamąjį JavaScript, naudokite <code>let x = 10;</code> komandą.</p>

<p>Štai ilgesnis kodo pavyzdys:</p>
<pre><code>function pasisveikinimas() {
console.log("Labas, pasauli!");
return true;
}</code></pre>

Svarbu: Specialiųjų simbolių keitimas

Jei pačiame kode yra simbolių < arba >, naršyklė gali juos supainioti su HTML žymėmis. Juos būtina pakeisti specialiais kodais (HTML entities):

• Pakeiskite < į &lt; (less than)
• Pakeiskite > į &gt; (greater than)
• Pakeiskite & į &amp; (ampersand)Pavyzdys:

Norėdami saugiai parodyti HTML kodą <div>Turinys</div>, rašykite taip:
HTML pavyzdys:

Norėdami tvarkingai įdėti kodą į HTML programavimo svetainę, kad naršyklė jo nevykdytų, o rodytų kaip tekstą, naudokite specialias HTML žymes ir
simbolius.

Pagrindinis būdas (Teksto eilutė vs Blokas)

• Eilutės viduje (Inline): Naudokite <code> žymę, kai norite įterpti trumpą kodo fragmentą pačiame sakinyje.
• Kodo blokas: Kombinuokite <pre> ir <code> žymes, kad išlaikytumėte kodo formatavimą, tarpus ir naujas eilutes.

HTML pavyzdys:

<p>Norėdami sukurti kintamąjį JavaScript, naudokite <code>let x = 10;</code> komandą.</p>

<p>Štai ilgesnis kodo pavyzdys:</p>
<pre><code>function pasisveikinimas() {
console.log("Labas, pasauli!");
return true;
}</code></pre>

Svarbu: Specialiųjų simbolių keitimas

Jei pačiame kode yra simbolių < arba >, naršyklė gali juos supainioti su HTML žymėmis. Juos būtina pakeisti specialiais kodais (HTML entities):

• Pakeiskite < į &lt; (less than)
• Pakeiskite > į &gt; (greater than)
• Pakeiskite & į &amp; (ampersand)Pavyzdys:

Norėdami saugiai parodyti HTML kodą <div>Turinys</div>, rašykite taip:

HTML pavyzdys:

<pre><code>&lt;div&gt;Turinys&lt;/div&gt;</code></pre>

Estetinis kodo išvaizdos gerinimas

Jei tinklapis HTML kalba programuotas, štai kodas, tiktai stiliaus kodus reikia dėti Head dalyje:

<style>
pre {
background-color: #2d3748; /* Tamsiai pilkas fonas */
color: #f7fafc; /* Balta teksto spalva */
padding: 15px; /* Tarpas viduje */
border-radius: 6px; /* Suapvalinti kampai */
font-family: monospace; /* Programavimo šriftas */
white-space: pre-wrap; /* Kad keltų eilutes */
}
</style>

<pre><code>function pasisveikinimas() {
console.log("Labas, pasauli!");
return true;
}</code></pre>

Jei kodus norite TVS sistemoje parodyti, pvz. Joomla, tada bendra kodas būtų toks:

<pre style="background-color: #2d3748; color: #f7fafc; padding: 15px; border-radius: 6px; font-family: monospace; white-space: pre-wrap;"><code>function pasisveikinimas() {
console.log("Labas, pasauli!");
return true;
}</code></pre>

O atrodys taip:

function pasisveikinimas() {
console.log("Labas, pasauli!");
return true;
}

Estetinis kodo išvaizdos gerinimas

Jei tinklapis HTML kalba programuotas, štai kodas, tiktai stiliaus kodus reikia dėti Head dalyje:

<style>
pre {
background-color: #2d3748; /* Tamsiai pilkas fonas */
color: #f7fafc; /* Balta teksto spalva */
padding: 15px; /* Tarpas viduje */
border-radius: 6px; /* Suapvalinti kampai */
font-family: monospace; /* Programavimo šriftas */
white-space: pre-wrap; /* Kad keltų eilutes */
}
</style>

<pre><code>function pasisveikinimas() {
console.log("Labas, pasauli!");
return true;
}</code></pre>

Jei kodus norite TVS sistemoje parodyti, pvz. Joomla, tada bendra kodas būtų toks:

<pre style="background-color: #2d3748; color: #f7fafc; padding: 15px; border-radius: 6px; font-family: monospace; white-space: pre-wrap;"><code>function pasisveikinimas() {
console.log("Labas, pasauli!");
return true;
}</code></pre>

O atrodys taip:

function pasisveikinimas() {
console.log("Labas, pasauli!");
return true;
}