Tvorba webových stránok – Manuál k redakčnému systému Rheia 1.0, Roman Horváth, © 2015, powered by Rheia

Obsah stránky sa číta, prosím čakajte…

 TWS – Manuál k RS Rheia 1.0 – Obsah | Formátovanie toku textu  « Zoznamy článkov v kartách  |  Definovanie článkov » 

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#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 otvárané v novom okne
(obvykle ide o externý odkaz), HTML otvárané v novom okne
(obvykle ide o externý odkaz)CSS otvárané v novom okne
(obvykle ide o externý odkaz). Zafarbenie syntaxe je vykonávané na strane klienta – pomocou JavaScriptu otvárané v novom okne
(obvykle ide o externý odkaz).)

Príklad:

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

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

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


<body>

</body>
</html>
#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();
	}
}
<!DOCTYPE html>
<html lang="sk">
<head>
	<meta charset="UTF-8" />
	<title>Titulok stránky</title>
</head>


<body>

</body>
</html>
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 */
}

 

Súvisiace kapitoly:

 


Otázky a úlohy:

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