Pomoc:Podświetlanie składni: Różnice pomiędzy wersjami
mNie podano opisu zmian |
Nie podano opisu zmian |
||
Linia 1: | Linia 1: | ||
{{podświetl}} |
|||
== Podświetlania składni == |
== Podświetlania składni == |
||
{| class="wikitable" style="width: 20%; clear: right; float: right; padding: 2px; margin-left: 5px; text-align: center" |
{| class="wikitable" style="width: 20%; clear: right; float: right; padding: 2px; margin-left: 5px; text-align: center" |
||
|- |
|- |
||
! Język |
! Język |
||
! |
! Skrót |
||
|- |
|- |
||
| C |
| C |
||
| |
| c |
||
|- |
|- |
||
| C++ |
| C++ |
||
| |
| cpp |
||
|- |
|- |
||
| JavaScript |
| JavaScript |
||
| |
| js |
||
|- |
|- |
||
| Pascal |
| Pascal |
||
| |
| pas |
||
|- |
|- |
||
| Python |
| Python |
||
| |
| py |
||
|} |
|} |
||
Chyba każdy się zgodzi, że odpowiednio podświetlony kod danego języka |
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%"> |
<div style="width: 70%"> |
||
<nowiki> |
<nowiki> |
||
Linia 42: | Linia 43: | ||
} |
} |
||
</div> |
</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 |
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 pomimo tego większość przeglądarek obsługuje |
Na szczęście pomimo tego większość przeglądarek obsługuje Jave Script, 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 {{tl|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%"> |
<div style="width: 70%"> |
||
<nowiki> |
<nowiki> |
||
Linia 100: | Linia 106: | ||
</div> |
</div> |
||
Skolei, 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 |
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, dlatego też mamy możliwość zdefiniowania domyślnego podświetlania wewnątrz bloku '''div''' wstawiając <nowiki><div id="highlighting" class="lang-xx">zawartość strony</div></nowiki>. Podejście to ma jedną wadę, ponieważ w takim przypadku będą podświetlane jedynie te kody źródłowe, które się znajdują w tym bloku (w bloku, gdzie id="highlighting", a nie na całej stronie). Przykład: |
|||
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ą {{tl|podświetl|<nowiki>|skrót języka</nowiki>}}. Na przykład, jeśli kod strony będzie wyglądał tak: |
|||
<pre style="width: 70%"> |
<pre style="width: 70%"> |
||
{{podświetl|python}} |
|||
<div id="highlighting" class="lang-py"> |
|||
def dodaj(a, b): |
def dodaj(a, b): |
||
return a + b |
return a + b |
||
Linia 113: | Linia 119: | ||
Instrukcja <tt>def</tt> służy do definiowania funkcji w Pythonie, |
Instrukcja <tt>def</tt> służy do definiowania funkcji w Pythonie, |
||
podobnie jak <tt class="lang-js">function</tt> w Javie Script. |
podobnie jak <tt class="lang-js">function</tt> w Javie Script. |
||
⚫ | |||
</pre> |
</pre> |
||
Otrzymamy: |
Otrzymamy: |
||
<div style="background: white; width: 70%; padding: 5px; border: 1px solid black"> |
<div style="background: white; width: 70%; padding: 5px; border: 1px solid black"> |
||
<pre class="lang-py |
<pre class="lang-py"> |
||
def dodaj(a, b): |
def dodaj(a, b): |
||
return a + b |
return a + b |
||
Linia 127: | Linia 132: | ||
</div> |
</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: |
|||
* Zdefniować domyślny język za pomocą {{tl|podświetl|<nowiki>|skrót języka</nowiki>}}. |
|||
* Zamiast z bloku '''pre''' skorzystać z '''tt'''. |
|||
W przypadku, gdy zdefinujemy 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> |
</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> |
|||
⚫ | |||
</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 === |
|||
⚫ | |||
[[Kategoria:Pomoc]] |
[[Kategoria:Pomoc]] |
Wersja z 20:10, 11 lis 2006
Podświetlania składni
Język | Skrót |
---|---|
C | c |
C++ | cpp |
JavaScript | js |
Pascal | pas |
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:
<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; }
Otrzymujemy:
#include <iostream> using namespace std; int main() { cout << "Hello World\n"; return 0; }
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 pomimo tego większość przeglądarek obsługuje Jave Script, 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 Szablon:Tl 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 lang-(skrót języka). Na przykład, aby podświetlić kod C++, napiszemy:
<pre class="lang-cpp"> #include <iostream> using namespace std; int main() { cout << "Hello World\n"; return 0; } </pre>
I otrzymamy
#include <iostream> using namespace std; int main() { cout << "Hello World\n"; return 0; }
Natomiast pisząc:
<pre class="lang-py"> def silnia(a): if a == 0: return 1 return a*silnia(a-1) print silnia(30) </pre>
otrzymamy:
def silnia(a): if a == 0: return 1 return a*silnia(a-1) print silnia(30)
Skolei, gdy napiszemy <tt class="lang-cpp">using namespace std;</tt> otrzymamy using namespace std;.
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ą Szablon:Tl. Na przykład, jeśli kod strony będzie wyglądał tak:
{{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.
Otrzymamy:
def dodaj(a, b): return a + b
Instrukcja def służy do definiowania funkcji w Pythonie, podobnie jak function w Javie Script.
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:
- Zdefniować domyślny język za pomocą Szablon:Tl.
- Zamiast z bloku pre skorzystać z tt.
W przypadku, gdy zdefinujemy domyślny język, możemy pisać tak jak zawsze, dodając dodatkowe wcięcia do kodu i formatując go np.
{{podświetl|py}} Kod źródłowy: def test(): print "OK" '''a = 10''' # bardzo ważne
Otrzymamy:
Kod źródłowy:
def test(): print "OK" a = 10 # bardzo ważne
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.
<tt class="lang-py">def test(): print "OK" '''a = 10''' # bardzo ważne</tt> </div>
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 <span>...</span> i po problemie np.
{{podświetl|cpp}} <span>Słowo void, czy return już dla nas nic nie znaczy.</span>
Otrzymamy:
Słowo void, czy return już dla nas nic nie znaczy.
Brakuje języka
Jeśli chcesz, aby została dodana obsługa pewnego języka, porozmawiaj o tym w Barze. W przypadku znalezienia jakiś błędów w skrypcie, także powinnieneś o tym tam napisać.