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)
Piotr (dyskusja | edycje)
mNie podano opisu zmian
Linia 44: Linia 44:
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 (zresztą nie powinno się używać znacznika '''font'''), traci mnóstwo czasu na kolory, a jakość i czyteloność kodu 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''' 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 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:
<div style="width: 70%">
<div style="width: 70%">
<nowiki>
<nowiki>
Linia 99: Linia 99:
</pre>
</pre>
</div>
</div>

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 jakiej klasy trzeba użyć.

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:

<pre style="width: 70%">
<div id="highlighting" class="lang-py">
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.
</div>
</pre>

Otrzymamy:
<div style="background: white; width: 70%; padding: 5px; border: 1px solid black">
<pre class="lang-py" style="width: 90%">
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 Javie Script.
</div>


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


</div>
[[Kategoria:Pomoc]]
[[Kategoria:Pomoc]]

Wersja z 14:37, 2 lis 2006

Podświetlania składni

Język Klasa
C lang-c
C++ lang-cpp
JavaScript lang-js
Pascal lang-pas
Python lang-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:

<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 (zresztą nie powinno się używać znacznika font), traci mnóstwo czasu na kolory, a jakość i czyteloność kodu 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 (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:

<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)

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 jakiej klasy trzeba użyć.

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 <div id="highlighting" class="lang-xx">zawartość strony</div>. 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:

<div id="highlighting" class="lang-py">
 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.
</div>

Otrzymamy:

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

Instrukcja def służy do definiowania funkcji w Pythonie, podobnie jak function w Javie Script.

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