Kolorowanie składni na stronie www
Ponieważ blog ten z założenia ma być o tematyce programistycznej, nie wyobrażam sobie pisania postów bez dobrego kolorowania składni przedstawianych przykładów. Postanowiłem poszukać kilka ogólnie znanych metod uzyskania kolorowej składni popularnych języków. Postanowiłem zawęzić horyzont do najbardziej mnie interesujących GeSHi, SyntaxHighlighter oraz Highlight.js.
Wystarczy CSS
Oczywiście nie zawsze musimy korzystać z osobnych skryptów, aby osiągnąć zadowalające efekty. Czasami wystarczy użyć czystego CSS oraz tagów <pre> oraz <code>. Poniżej przedstawiłem przykładowy sposób ostylowania tych znaczników.
pre {
background: #f0f0f0;
border-left: 2px solid #ccc;
font-size: 12px;
line-height: 20px;
margin: 0 auto;
overflow: auto;
overflow-Y: hidden;
width: 600px;
}
pre code {
color:#333;
display: block;
font-family: "Courier New",Courier,monospace;
margin: 0 0 0 20px;
padding: 15px 0;
}Jest to bardzo prosty sposób dzięki któremu osiągamy przyzwoite efekty, w zupełności wystarczające do przedstawienia mało skomplikowanego kodu jak style CSS czy fragmenty HTML. Metoda taka jest używana miedzy innymi przez Css Globe oraz CSS-Tricks.
GeSHi
Czyli Generic Syntax Highlighter to działający po stronie serwera skrypt zwracający ostylowany kod gotowy do prezentacji na stronach internetowych. Skrypt przy wersji 1.0.8.3 obsługuje 132 języki programowania! Liczba ta jest imponująca, podobnie jak opcje, dzięki którym możemy w bardzo elastyczny sposób dostosować wygląd kodu do naszych wymagań. Dodawanie kolejnych języków nie jest skomplikowane, jednak nie wyobrażam sobie osoby, która nie znajdzie w skrypcie lub na forum interesującego go języka.
Czytaj dalej...
