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:

       Korzystamy w tym celu z ikonki "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:

       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" (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> 

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