Ukážka zdrojového kódu | Manuál k redakčnému systému Rheia

Na vloženie bloku s ukážkou zdrojového kódu (porovnaj s formátovaním ukážky kódu v kapitole Základné formátovanie textu) slúži dvojica direktív #startCode a #endCode, ktoré musia byť umiestnené na samostatných riadkoch a odsek pred ukážkou musí byť korektne ukončený prázdnym riadkom (odporúčame od ukážky oddeliť prázdnym riadkom aj obsah nasledujúci za ukážkou):

Toto je odsek pred kódom.

#startCode
Toto je ukážka zdrojového kódu.
#endCode

Toto je odsek za kódom.

Výsledok:

Toto je odsek pred kódom.

Toto je ukážka zdrojového kódu.

Toto je odsek za kódom.

V bloku ukážky zdrojového kódu neplatia pravidlá formátovania textu ani pravidlá formátovania toku textu. To znamená, že hviezdička nevytvorí tučné písmo, ani lomka kurzívu, prázdny riadok nevytvorí nový odsek, tabulátor nevytvorí tabuľku (ale odsadenie) a tak ďalej.

Z uvedeného vyplýva, že tabulátory je možné použiť na odsadenie textu. Okrem nich je možné na odsadenie na dosiahnutie požadovaného výsledku použiť aj pevnú medzeru. Na jej vloženie je nevyhnutné použiť kód code(nbsp) (pozri kapitolu Preddefinované kódy, definícia vlastných kódov a ďalšie direktívy, sekciu Preddefinované kódy), pretože v bloku ukážky kódu je entita   zobrazená doslovne. Obyčajné medzery sú systémom Rheia zo začiatkov aj koncov riadkov paušálne zmazané ešte pred spracovaním zdrojového textu a preto nie sú na odsadenie použiteľné.

Pozrite sa na nasledujúci príklad vloženia bloku s ukážkou zdrojového kódu:

#startCode
␣␣␣␣// Na začiatku tohto riadka boli štyri medzery. Podobne aj na konci.␣␣␣␣

  →  // Toto odsadenie bolo vytvorené tabulátormi.
  →  // Malo by mať šírku osem znakov.
  →  a = 10 * (80 + x) * n;
  →  ++x; --n;

∘␣∘␣/**
∘␣∘␣∘* Toto odsadenie bolo vytvorené
∘␣∘␣∘* kombináciou klasických a pevných
∘␣∘␣∘* medzier. Má šírku štyroch znakov.
∘␣∘␣∘*/
#endCode

Toto je výsledok:

 // Na začiatku tohto riadka boli štyri medzery. Podobne aj na konci.

	// Toto odsadenie bolo vytvorené tabulátormi.
	// Malo by mať šírku osem znakov.
	a = 10 * (80 + x) * n;
	++x; --n;

    /**
     * Toto odsadenie bolo vytvorené
     * kombináciou klasických a pevných
     * medzier. Má šírku štyroch znakov.
     */

Na porovnanie – keby sme rovnaký text umiestnili mimo bloku ukážky zdrojového kódu, dostali by sme takýto výsledok:

/ Na začiatku tohto riadka boli štyri medzery. Podobne aj na konci.

/ Toto odsadenie bolo vytvorené tabulátormi.

/ Malo by mať šírku osem znakov.

a = 10 (80 + x) n;

++x; – n;

* Toto odsadenie bolo vytvorené kombináciou klasických a pevných medzier. Má šírku štyroch znakov.

(Rozdiel je markantný.)

Rheia podporuje aj automatické zafarbovanie syntaxe na strane klienta. Blok s ukážkou kódu so zafarbením syntaxe vložíte úpravou začiatočnej direktívy do tvaru:

#start«kód programovacieho jazyka»Code

Napríklad #startJavaCode.

(V súčasnosti je implementovaná farebná syntax pre jazyky: Java, Pascal, PHP, C/C++, HTML a CSS. Zafarbenie syntaxe je vykonávané na strane klienta – s pomocou JavaScriptu. )

Príklad:

~

#startJavaCode
public class Trieda
{
  →  public Trieda()
  →  {
  →    →  System.out.println("Test");
  →  }

  →  public static void main(String[] args)
  →  {
  →    →  Trieda inštancia = new Trieda();
  →  }
}
#endCode

~

#startPascalCode
program Ahoj;

begin
  →  writeln('Ahoj!')
end.
#endCode

~

#startCCPPCode
#include <iostream>
using namespace std;

int main()
{
  →  int n;
  →  cout << "Zadajte celé nezáporné číslo: ";
  →  cin >> n;

  →  while (n < 0)
  →  {
  →    →  cout << n << " nie je nezáporné číslo.\n" <<
  →    →    →  "Prosím, zadajte celé nezáporné číslo: ";
  →    →  cin >> n;
  →  }

  →  // 0 a 1 nie sú prvočísla:
  →  bool jePrvocislo = 0 != n && 1 != n;

  →  // Primitívny spôsob overenia prvočísla v cykle:
  →  int n2 = n / 2;
  →  for (int i = 2; i <= n2; ++i)
  →    →  if (0 == n % i)
  →    →  {
  →    →    →  jePrvocislo = false;
  →    →    →  break;
  →    →  }

  →  cout << n << (jePrvocislo ? "" : " nie") << " je prvočíslo.";

  →  return 0;
}
#endCode

#startHTMLCode
<!DOCTYPE html>
<html lang="sk">
<head>
  →  <meta charset="UTF-8" />
  →  <title>Titulok stránky</title>
</head>


<body>

</body>
</html>
#endCode

~

#startPHPCode
<?php
echo 'Ahoj!';
?>
#endCode

#startCSSCode
body
{
  →  background-image: url(moje-farebne-pozadie.png);
}

div.jadro
{
  →  margin: 10px auto;∘␣∘␣∘␣∘␣∘␣∘/* vonkajšie okraje, auto - vystredí */
  →  padding: 10px 20px;∘␣∘␣∘␣∘␣∘∘/* vnútorné okraje */
  →  font-family: sans-serif;∘␣∘␣∘/* písmo neserifové */
  →  width: 80%;∘␣∘␣∘␣∘␣∘␣∘␣∘␣∘␣∘∘/* 80% šírka bloku */
  →  min-width: 600px;∘␣∘␣∘␣∘␣∘␣∘∘/* najmenšia dovolená šírka v pixeloch */
  →  border-radius: 10px;∘␣∘␣∘␣∘␣∘/* oblé okraje */
  →  background-color: rgba(255, 255, 255, 0.75);∘␣/* priehľadné pozadie */
}

p
{
  →  text-align: justify;∘␣∘␣∘␣∘␣∘/* zarovnanie podľa okraja */
  →  line-height: 125%;∘␣∘␣∘␣∘␣∘␣∘/* riadkovanie 1.25 riadka */
}
#endCode

Výsledok:

public class Trieda
{
	public Trieda()
	{
		System.out.println("Test");
	}

	public static void main(String[] args)
	{
		Trieda inštancia = new Trieda();
	}
}

program Ahoj;

begin
	writeln('Ahoj!')
end.

#include <iostream>
using namespace std;

int main()
{
	int n;
	cout << "Zadajte celé nezáporné číslo: ";
	cin >> n;

	while (n < 0)
	{
		cout << n << " nie je nezáporné číslo.\n" <<
			"Prosím, zadajte celé nezáporné číslo: ";
		cin >> n;
	}

	// 0 a 1 nie sú prvočísla:
	bool jePrvocislo = 0 != n && 1 != n;

	// Primitívny spôsob overenia prvočísla v cykle:
	int n2 = n / 2;
	for (int i = 2; i <= n2; ++i)
		if (0 == n % i)
		{
			jePrvocislo = false;
			break;
		}

	cout << n << (jePrvocislo ? "" : " nie") << " je prvočíslo.";

	return 0;
}

<!DOCTYPE html>
<html lang="sk">
<head>
	<meta charset="UTF-8" />
	<title>Titulok stránky</title>
</head>


<body>

</body>
</html>

<?php
echo 'Ahoj!';
?>

body
{
	background-image: url(moje-farebne-pozadie.png);
}

div.jadro
{
	margin: 10px auto;           /* vonkajšie okraje, auto - vystredí */
	padding: 10px 20px;          /* vnútorné okraje */
	font-family: sans-serif;     /* písmo neserifové */
	width: 80%;                  /* 80% šírka bloku */
	min-width: 600px;            /* najmenšia dovolená šírka v pixeloch */
	border-radius: 10px;         /* oblé okraje */
	background-color: rgba(255, 255, 255, 0.75);  /* priehľadné pozadie */
}

p
{
	text-align: justify;         /* zarovnanie podľa okraja */
	line-height: 125%;           /* riadkovanie 1.25 riadka */
}

Bloky kódu pre jazyky Java, Pascal, PHP a C/C++ musia mať pred sebou uvedený element (odsek) určujúci titulok. Ak nechceme, aby blok kódu obsahoval titulok, tak musíme pred blok týchto kódov uviesť odsek obsahujúci jediný znak vlnovky (~) ako je to v príkladoch vyššie. Ak titulok uvedieme, prejaví sa to tak, ako ukazuje príklad nižšie.

Príklad:

Príklad `Ahoj!`

#startJavaCode
public class Trieda
{
  →  public static void main(String[] args)
  →  {
  →    →  System.out.println("Ahoj!");
  →  }
}
#endCode

Výsledok:

Príklad Ahoj!

public class Trieda
{
	public static void main(String[] args)
	{
		System.out.println("Ahoj!");
	}
}

Zafarbovač HTML automaticky vkladá aj zafarbovače Javy (pre JavaScript, aj keď to nie je presné; možno sa to časom zmení) a CSS. Podobne, zafarbovač PHP vkladá zafarbovač HTML a k nemu aj dva práve spomenuté (Java, CSS).

Rheia zabezpečuje, aby bol každý zafarbovač vložený práve raz.

Blok s kódom môže mať definované vlastné HTML ID – pozri kapitolu Preddefinované kódy, definícia vlastných kódov a ďalšie direktívy.

Súvisiace kapitoly:

Preddefinované kódy, definícia vlastných kódov a ďalšie direktívy

Otázky a úlohy:

Ako sa odlišuje spracovanie zdrojového textu RS Rheia v bloku ukážky zdrojového kódu od klasického spracovania?
Ako je možné vložiť blok ukážky zdrojového kódu s automatickým zafarbovaním syntaxe?

TWS – Manuál k RS Rheia 1.5 – Obsah « Zoznamy článkov v kartách | Definovanie článkov »