Pomoc:Podświetlanie składni: Różnice pomiędzy wersjami

Dodaj linki
Z Wikibooks, biblioteki wolnych podręczników.
Przeglądaj historię interaktywnie
← poprzednia edycjanastępna edycja →
Usunięta treść Dodana treść
WizualnieWikikod
Beau (dyskusja | edycje)
892 edycje
Nie podano opisu zmian
Beau (dyskusja | edycje)
892 edycje
usunięcie informacji o starym mechaniźmie, drobne techniczne
Linia 1: Linia 1:
{{Podrozdział|Pomoc|Podświetlanie składni}}
{{Podrozdział|Pomoc|Podświetlanie składni}}
<noinclude>{{TopPage|czcionka=100%}}</noinclude>
<noinclude>{{TopPage|czcionka=100%}}</noinclude>
{{podświetl}}


Oprogramowanie MediaWiki daje nam możliwość podświetlania składni. Wykorzystujemy do tego celu znacznik <code><nowiki><source lang="język"></source></nowiki></code>, np.
Oprogramowanie MediaWiki daje nam możliwość podświetlania składni. Wykorzystujemy do tego celu znacznik <code><nowiki><source lang="język"></source></nowiki></code>, np.
Linia 59: Linia 58:
</source>
</source>


Więcej na ten temat można poczytać na [[mw:Extension:SyntaxHighlight_GeSHi|stronie MediaWiki]].
{{Infobox|Podane rozwiązanie jest '''zalecane''', ale w niektórych przypadkach może okazać się wygodniejsze drugie rozwiązanie, podane niżej. Nie powinno się mieszać obu metod w jednym podręczniku.}}

Więcej na ten temat można poczytać na [http://www.mediawiki.org/wiki/Extension:SyntaxHighlight_GeSHi stronie MediaWiki].

== Podświetlania składni (JavaScript) ==
{| class="wikitable" style="width: 20%; clear: right; float: right; padding: 2px; margin-left: 5px; text-align: center"
|-
! Język
! Skrót
|-
| C
| c
|-
| C++
| cpp
|-
| JavaScript
| js
|-
| Pascal
| pas
|-
| PHP
| php
|-
| Python
| py
|}

Chyba każdy się zgodzi, że odpowiednio podświetlony kod danego języka programowania ułatwia jego czytanie i zrozumienie. Niestety oprogramowanie Wikibooks nie daje nam takiej możliwości. Wcześniej podświetlanie składni można było uzyskać poprzez ręczne kolorowanie kodu, co było oczywiście dosyć niewygodne i uciążliwe. Na przykład wstawiając kod:
<div style="width: 70%">
<nowiki>
<font color=blue>#include</font> <iostream>
<font color=blue>using namespace</font> std;
<font color=green>int</font> main() {
cout << "Hello World\n";
<font color=blue>return</font> 0;
}
</nowiki>
Otrzymujemy:
<font color=blue>#include</font> <iostream>
<font color=blue>using namespace</font> std;
<font color=green>int</font> main() {
cout << "Hello World\n";
<font color=blue>return</font> 0;
}
</div>
Niestety takie podejście do kolorowania kodu jest dla większości jednak uciążliwe i Wikipisarz zamiast skupić się na treści za bardzo koncentruje się na wyglądzie, traci mnóstwo czasu na kolory, a jakość i czytelność kodu wiki jest raczej kiepska.

Na szczęście większość przeglądarek obsługuje JavaScript, dlatego też został stworzony skrypt koloryzujący składnię różnych języków programowania (kod można znaleźć w [[MediaWiki:Ext/Highlighting.js]]).

=== Korzystanie ze skryptu ===
Aby skrypt się załadował w danym pliku należy umieścić w pewnym miejscu szablon {{S|podświetl}} i tylko tyle.

Teraz wystarczy wstawić blok '''pre''' lub '''tt''' i ustawić klasę, która została przeznaczona dla danego języka, a klasa jest postaci <tt>lang-(skrót języka)</tt>. Na przykład, aby podświetlić kod C++, napiszemy:
<div style="width: 70%">
<nowiki>
<pre class="lang-cpp">
#include <iostream>

using namespace std;

int main() {
cout << "Hello World\n";
return 0;
}
</pre>
</nowiki>
</div>

I otrzymamy
<div style="width: 70%">
<pre class="lang-cpp">
#include <iostream>

using namespace std;

int main() {
cout << "Hello World\n";
return 0;
}
</pre>
</div>

Natomiast pisząc:
<div style="width: 70%">
<nowiki>
<pre class="lang-py">
def silnia(a):
if a == 0:
return 1
return a*silnia(a-1)

print silnia(30)
</pre>
</nowiki>
</div>

otrzymamy:
<div style="width: 70%">
<pre class="lang-py">
def silnia(a):
if a == 0:
return 1
return a*silnia(a-1)

print silnia(30)
</pre>
</div>

Z kolei, gdy napiszemy <nowiki><tt class="lang-cpp">using namespace std;</tt></nowiki> otrzymamy <tt class="lang-cpp">using namespace std;</tt>.

W tabeli na górze strony została wypisana liczba obsługiwanych języków przez skrypt i jaki posiada dany język skrót. Należy zaznaczyć, że wielkość liter ma znaczenia.

W większości przypadków na jednej stronie opisujemy tylko jeden język programowania. Skrypt także daje nam możliwość zdefiniowania domyślnego języka za pomocą {{S|podświetl|<nowiki>|skrót języka</nowiki>}}. Na przykład, jeśli kod strony będzie wyglądał tak:
<pre style="width: 70%">
{{podświetl|python}}

def dodaj(a, b):
return a + b

Instrukcja <tt>def</tt> służy do definiowania funkcji w Pythonie,
podobnie jak <tt class="lang-js">function</tt> w Javie Script.
</pre>

Otrzymamy:
<div style="background: white; width: 70%; padding: 5px; border: 1px solid black">
<pre class="lang-py">
def dodaj(a, b):
return a + b
</pre>

Instrukcja <tt class="lang-py">def</tt> służy do definiowania funkcji w Pythonie,
podobnie jak <tt class="lang-js">function</tt> w JavaScript.
</div>

=== Rozwiązywanie problemów ===
==== Podświetlanie a własne formatowanie ====
Załóżmy, że chcielibyśmy, aby pewna linia została w jakiś sposób została wyróżniona np. kolorem, czy pogrubieniem. W takim przypadku nie możemy skorzystać z bloku '''pre''', ale za to istnieją dwa inne rozwiązania:
* Zdefiniować domyślny język za pomocą {{S|podświetl|<nowiki>|skrót języka</nowiki>}}.
* Zamiast z bloku '''pre''' skorzystać z '''tt'''.

W przypadku, gdy zdefiniujemy domyślny język, możemy pisać tak jak zawsze, dodając dodatkowe wcięcia do kodu i formatując go np.
<pre>
{{podświetl|py}}
Kod źródłowy:
def test():
print "OK"
'''a = 10''' # bardzo ważne
</pre>

Otrzymamy:
<div style="background: white; width: 70%; padding: 5px; border: 1px solid black">
Kod źródłowy:
<tt class="lang-py">def test():
print "OK"
'''a = 10''' # bardzo ważne</tt>
</div>

W przypadku, gdy z jakichś powodów nie możemy skorzystać z pierwszego sposobu, korzystamy oczywiście z drugiego. Zamiast korzystać z '''pre''' korzystamy z '''tt''' tworząc jednocześnie wcięcia np.
<pre style="width: 70%">
<tt class="lang-py">def test():
print "OK"
'''a = 10''' # bardzo ważne</tt>
</div>
</pre>

Wynik będzie identyczny z poprzednim.

=== Jeśli nie chcemy podświetlać ===
Załóżmy, że zdefiniowaliśmy domyślny język i tworzymy sobie jakiś tekst preformatowany, który nie chcemy podświetlać. Co możemy zrobić? Wystarczy wszystko umieścić w <nowiki><span>...</span></nowiki> i po problemie np.
<pre style="width: 70%">
{{podświetl|cpp}}
<span>Słowo void, czy return już dla
nas nic nie znaczy.</span>
</pre>

Otrzymamy:
<pre style="width: 70%">
Słowo void, czy return już dla
nas nic nie znaczy.
</pre>

=== Brakuje języka ===
Jeśli chcesz, aby została dodana obsługa pewnego języka, porozmawiaj o tym w [[WB:BAR|Barze]]. W przypadku znalezienia jakiś błędów w skrypcie, także powinieneś o tym tam napisać.


<noinclude>----
<noinclude>----
<center>'''[[Pomoc|Powrót do Pomocy Wikibooks]]'''</center>
<center>'''[[Pomoc:Spis treści|Powrót do Pomocy Wikibooks]]'''</center>
{{BottomPage}}
{{BottomPage}}
[[Kategoria:Pomoc|Podświetlanie składni]]
[[Kategoria:Pomoc]]
</noinclude>
</noinclude>

Wersja z 12:07, 11 mar 2012

Pomoc
Podświetlanie składni

Szablon:TopPage

Oprogramowanie MediaWiki daje nam możliwość podświetlania składni. Wykorzystujemy do tego celu znacznik <source lang="język"></source>, np. 

<source lang="python">
silnia = lambda x: x==0 or x*silnia(x-1)
print silnia(10)
</source>

Otrzymamy: 

silnia = lambda x: x==0 or x*silnia(x-1)
print silnia(10)

Możliwe jest dodanie numerowania linii poprzez umieszczenie flagi line: 

<source lang="python" line>
silnia = lambda x: x==0 or x*silnia(x-1)
print silnia(10)
</source>

Otrzymamy: 

silnia = lambda x: x==0 or x*silnia(x-1)
print silnia(10)

Aby zacząć numerowanie od konkretnej linii, dodajemy argument start: 

<source lang="python" line start="36">
silnia = lambda x: x==0 or x*silnia(x-1)
print silnia(10)
</source>

Otrzymamy: 

silnia = lambda x: x==0 or x*silnia(x-1)
print silnia(10)

Aby wyróżnić konkretną linię, dodajemy argument highlight z rzeczywistym numerem linii, od początku bloku (tj. aby podświetlić drugą linię, gdy numeracja zaczyna się od 36, nie wpisujemy 37, lecz 2): 

<source lang="python" line start="36" highlight="2">
silnia = lambda x: x==0 or x*silnia(x-1)
print silnia(10)
</source>

Otrzymamy: 

silnia = lambda x: x==0 or x*silnia(x-1)
print silnia(10)

Więcej na ten temat można poczytać na stronie MediaWiki.

Powrót do Pomocy Wikibooks

Szablon:BottomPage

Źródło: „https://pl.wikibooks.org/w/index.php?title=Pomoc:Podświetlanie_składni&oldid=180434”