Figero System
Figero System Strona Główna FAQ i Wyszukiarka Mapa Serwisu Kontakt Panel Użytkownika
Witamy na stronie Systemu Figero - Panel Użytkownika
Publikowanie i kolorowanie kodu

Jak publikować i kolorować kod źródłowy na stronie www?
       Bardzo często osoby tworzące serwisy internetowe korzystają z gotowych rozwiązań. Jednym z najlepszych jest znany SyntaxHighlighter, który został również podłączony do systemu figero i edytora graficznego TinyMCE. Wstawianie kodu na stronę możemy zrealizować na dwa sposoby:
  • automatycznie, z wykorzystaniem wbudowanych funkcji edytora TinyMCE
  • ręcznie, poprzez edycję kodu HTML w edytorze TinyMCE

Oczywiście robiąc to ręcznie musimy posiadać pewną wiedzę ale mamy też większe możliwości jego formatowania i pewności, że będzie wyświetlał się prawidłowo.

1. Automatyczne wstawianie kodu
       Korzystamy w tym celu z ikonki "Wstaw kod" (Insert Code) Ikonka Wstaw Kod - Insert Code edytora graficznego. Po otworzeniu się okienka wstawiamy do niego wybrany kod a następnie wybieramy składnię języka, według której nastąpi kolorowanie kodu:
Code Highlighting for SyntaxHighlighter


  • C#
  • C++
  • CSS
  • Java
  • Java Script
  • Php
  • Ruby
  • VB
  • XML/HTML
  • SQL
  • Delphi
  • Python
Parametry Code Highlighting
Następnie możemy włączyć dodatkowe parametry:
  • Bez rynienki (nogutter)
  • Bez przycików (nocontrols)
  • Zalamania (collapse)
  • Pokaż kolumny (showcolumns)
 2. Ręczne wstawianie kodu
       Ręczne wstawianie kodu wymaga podstawowej wiedzy z zakresu HTML/CSS. Wykonujemy je poprzez otworzenie okna HTML w edytorze graficznym ikonką "Edytuj żródło HTML" Edytuj żródło HTML - Edit HTML Source (Edit HTML Source).
       Następnie wyszukujemy miejsce gdzie chcemy umieścić kod i wstawiamy go pomiędzy znacznikami "pre" lub "textarea". Osobiście preferuję wstawiać kod pomiędzy znacznikami "pre" gdyż z samego założenia służą one do tego celu a poza tym znaczniki "textarea" należą do grupy elementów formularza i mogą być niepoprawnie interpretowane nawet przez sam edytor graficzny TinyMCE.
Poniżej przykład kodu który należy wstawić w oknie źródła HTML i jednocześnie możecie zobaczyć jak będzie wyglądać to na waszej stornie gdyż ten kod jest także generowany z użyciem SyntaxHighlighter 2.0. Możemy wstawić kod korzystając ze składni:
  •  Syntax Highlighter 1.5
           Jeżeli korzystacie z wersji 1.5 warto otoczyć tag "pre" dodatkowym divem ponieważ w niektórych przypadkach może nam się rozjechać szkielet(układ) strony. Tą niedogodność usunięto w wersji 2.0. W szczególnych przepadkach zamiast składni z użyciem tagu "pre" można użyć "textarea" ale jest to niewskazane.
<div style="width: 450px; overflow: sroll; color: #6666ff;"> 
<pre name="code" class="xhtml"> 
--- tutaj 
--- będzie 
--- kod 
--- <a href="http://www.figero.net">link</a>
--- link jest aktywny
</pre>
</div> 
  • Syntax Highlighter 2.0 (użyty w tym przykładzie)
       Jeżeli korzystacie z wersji 2.0 to należy pamiętać, że nie można wtawiać kodu automatycznie oraz że jest nieco inna składnia tagu "pre", nie trzeba między innymi stosować parametru name="code". Wersja 2.0 oferuje ponadto wiele dodatkowych możliwości.
<pre class="brush: xhtml; highlight: [3, 5]; toolbar: false; auto-links: false"> 
--- tutaj 
--- będzie 
--- kod  
--- który
--- sobie
--- wpiszecie
--- <a href="http://www.figero.net">link</a>
--- a ten link jest tylko zwykłym tekstem, nie jest aktywny
</pre>
Poniżej lista opcji z możliwością ustawienia ich korzystając z parametru "class" dla tagu "pre" (patrz wyżej...)
  • auto-links - umożliwa detekcję linków we wstawionym kodzie i możliwość zamiany ich na aktywne, klikalne linki (domyślnie ustawiono na true)
  • class-name - możliwość nadawania własnych klas do każdego elementu highlighter 
  • collapse - umożliwia zwinięcie kodu w jeden wiersz przy wyświetleniu strony (domyślnie ustawiono na false)
  • first-line - umożliwia rozpoczęcie liczenia lini kodu od dowolnej liczby (domyślnie ustawione na 1)
  • font-size - umożliwia zmianę wielkości czcionki w kolorowanym kodzie bez implementacji dodatkowych styli CSS (domyślnie ustawiono na '100%')
  • gutter - umożliwia właczenie lub wyłączenie bocznej rynienki z numerami wierszy (domyślnie ustawiono na true)
  • highlight - umożliwia dodatkowe wyróżnienie wskazanych numerów wierszy, np.: highlight [1, 2, 3] (Domyślnie ustawiono na null).
  • html-script - pozwala dobrze pokolorować skrypt (np.:php) osadzony z w mieszance kodu HTML/XML. Innymi słowy używa kilku schematów kolorowania jednocześnie. (domyślnie ustawiono na false)
  • light - pozwala na ukrycie paska narzędziowego i rynienek z numerami wierszy/kolumn dla wybranego elementu highlighter, czyli pozostaje tylko sam kod w ramce (domyślnie ustawiono na false)
  • ruler - pozwala na wyświetlenie górnej rynienki z numerami kolumn. (domyślnie ustawiono na false)
  • smart-tabs - pozwala właczyć dopasowywanie tabulatorów dzięki czemu tekst ze wszystkich wierszy jest wyrównywany w pionie (domyślnie ustawiono na true)
  • tab-size - pozwala na modyfikację wielkości tabulatora (domyślnie ustawiono na 4).
  • toolbar - pozwala na ukrycie paska narzędziowego dla wybranego elementu highlighter (domyślnie ustawiono na true czyli pasek się pojawia w prawym górnym rogu)
3. Podłączanie biblioteki SyntaxHighlighter
 
SyntaxHighlighter
       Aby pokolorowany kod wyświetlił się na stronie, musimy w obu przypadkach włączyć biblioteki SyntaxHighlighter dla tej strony serwisu poprzez edycję właściwości danej strony.
        
SyntaxHighlighter
Jesteś w: Opis systemuTechniki zaawansowane-» Publikowanie i kolorowanie kodu -SyntaxHighlighter