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

Z Wikibooks, biblioteki wolnych podręczników.
Usunięta treść Dodana treść
Piotr (dyskusja | edycje)
mNie podano opisu zmian
Piotr (dyskusja | edycje)
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
! Klasa
! Skrót
|-
|-
| C
| C
| lang-c
| c
|-
|-
| C++
| C++
| lang-cpp
| cpp
|-
|-
| JavaScript
| JavaScript
| lang-js
| js
|-
|-
| Pascal
| Pascal
| lang-pas
| pas
|-
|-
| Python
| Python
| lang-py
| py
|}
|}
Chyba każdy się zgodzi, że odpowiednio podświetlony kod danego języka programawania 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:
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 (zresztą nie powinno się używać znacznika '''font'''), traci mnóstwo czasu na kolory, a jakość i czyteloność kodu kiepska.
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 Javę Script, dlatego też został stworzony skrypt koloryzujący składnię różnych języków programowania ([[MediaWiki:Ext/Highlighting.js|Ext/Highlighting.js]]). Skorzystanie z niego jest dziecinnie proste, wystarczy wstawić blok '''pre''' lub '''tt''' i ustawić odpowiednią klasę przeznaczoną dla danego języka. Na przykład, aby podświetlić kod C++, napiszemy:
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>


Gdy napiszemy <nowiki><tt class="lang-cpp">using namespace std;</tt></nowiki> otrzymamy <tt class="lang-cpp">using namespace std;</tt>.
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 jakiej klasy trzeba użyć.
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.
</div>
</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" style="width: 90%">
<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 ==
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 powinnieneś o tym tam napisać.
=== 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>
</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 powinnieneś o tym tam napisać.

[[Kategoria:Pomoc]]
[[Kategoria:Pomoc]]

Wersja z 20:10, 11 lis 2006

Szablon:Podświetl

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ć.