Prezentacja kodu źródłowego na własnej stronie

28 lutego 2016, 18:26Zostaw Swój komentarzTagi: , ,

Jak zaprezentować kod źródłowy na stronie internetowej, tak by był on przejrzysty a jednocześnie szybki we wdrożeniu i późniejszej eksploatacji? To pytanie zadaje sobie zapewne wielu developerów, i to nie tylko tych webowych.

Przeszukując internet pod tym kątem, natkniemy się na informacje o rozwiązaniach jak: Chili, CodeMirror, SyntaxHighlighter, Google Code Prettify, highlight.js, SHJS, JUSH, DlHighlight i wiele innych. Możemy zatem dojść do wniosku, że ilość dostępnych w sieci skryptów, które można potencjalnie wykorzystać, jest na tyle duża, że nie ma konieczności pisania własnego. Wystarczy jedynie wybrać rozwiązanie na miarę własnych potrzeb.

Pod względem funkcjonalności osobiście zaintrygował mnie skrypt ACE editor ze stajni Cloud9. Oferuje on obecnie 34 szablony kolorystyczne, co zwiększa szanse trafienia w nasz gust, lub ułatwi dopasowanie okna z kodem do koncepcji wizualnej strony internetowej. ACE editor, jak już jego nazwa mówi, jest w głównej mierze edytorem, jednak przy odpowiedniej jego inicjacji doskonale sobie radzi podczas kolorowania kodu, oferując funkcjonalności jakich nie posiadają inne rozwiązania.

Analizując możliwości tego skryptu, nie sposób pominąć tego, że radzi on sobie doskonale z kolorowaniem ponad 120 różnych formatów kodu!

Z czystym sumieniem mogę napisać, że zadowolony będzie zarówno frontend'owiec operujący językami CSS, JS, HTML, COFFEE SCRIPT, SASS czy LESS jak i programista piszący w językach PHP, JAVA, C, C#, Python, Ruby, Perl a nawet odchodzący do lamusa Cobol i Pascal. Jeśli zechcesz przekazać szerszemu gronu pewne konfiguracje lub pokazać przekazywane podczas komunikacji dane, nic nie stoi na przeszkodzie by przełączyć edytor w tryb kolorowania charakterystyczny dla plików XML, INI, czy JSON. Programiści tworzący szablony widoków w TWIG i SMARTY również znajdą odpowiedni tryb.

Nie będę tutaj wymieniał wszystkich możliwych formatów dokumentów, a odwołam się do strony demonstracyjnej, na której autorzy skryptu dają możliwość sprawdzenia niemalże każdej konfiguracji dostępnej podczas inicjacji skryptu na stronie. Jeśli wśród dostępnych trybów nie znajdziesz tego właściwego, producent nie zamyka nam drogi, udostępniając dokumentację umożliwiającą stworzenie własnego formatu. Personalizacja szablonów kolorystycznych również nie jest skomplikowana, i wystarczy podstawowa znajomość języka CSS.

Uruchomienie skryptu

Najbardziej podstawowy ale i zarazem najmniej elastyczny sposób wywołania to ten przedstawiony na stronie twórcy skryptu.

<!DOCTYPE html> <html lang="en"> <head> <title>ACE in Action</title> <style type="text/css" media="screen"> #editor { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } </style> </head> <body> <div id="editor">function foo(items) { var x = "All this is syntax highlighted"; return x; }</div> <script src="/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script> <script> var editor = ace.edit("editor"); //inicjalizacja biblioteki dla zdefiniowanego bloku kodu editor.setTheme("ace/theme/monokai");//wybór szablonu kolorystycznego editor.getSession().setMode("ace/mode/javascript");//wybór typu kodu </script> </body> </html>

Proponowałbym jednak skupić się nad implementacją bardziej elastycznego wywołania, umożliwiającego szybkie definiowanie bloków kodu bez konieczności definiowania odrębnych inicjalizacji.

Oczywiście pracę musimy rozpocząć od pobrania biblioteki z repozytorium projektu i podpięcia jej w kodzie HTML:

<script src="/js/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>

Konieczne będzie również podpięcie biblioteki jQuery (jeśli jeszcze z niej nie korzystamy):

<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>

Jeśli bloki kodu osadzimy w treści Swojej strony za pomocą na przykład takiego wywołania:

<div class="acecode" ace-mode="javascript"> alert('hello world!'); </div>

Przypiszemy mu określone style:

.acecode { width: 100%; float: left; clear:both; display:none; /* opcjonalnie */ }

To ich automatyczną obsługę w najprostszej formie zapewnimy sobie poniższym kodem javascript:

jQuery(window).load(function() { jQuery('.acecode').each( function( object ) { var editor = ace.edit(this); editor.setTheme('ace/theme/monokai'); var ace_mode = jQuery(this).attr("ace-mode"); if (ace_mode === undefined) { ace_mode = 'html'; } editor.getSession().setMode('ace/mode/' + ace_mode); jQuery(this).show();//wyświetlenie bloku gdy został zainicjowany (opcjonalnie) } ); });

Jak widzimy biblioteka zostanie zainicjowana dla każdego bloku z przypisaną klasą "acecode".

W bardziej rozbudowanej formie wywołania:

<div class="acecode" ace-mode="javascript" ace-theme="monokai" ace-gutter="true"> alert('hello world!'); </div>

przy zastosowanie bardziej rozbudowanego skryptu inicjującego (przedstawionego poniżej), uzyskamy możliwość łatwego sterowania nie tylko typem kodu, ale również szablonem kolorystycznym a nawet obecnością lub brakiem numeracji linijek.

jQuery(window).load(function() { jQuery('.acecode').each( function( object ) { var editor = ace.edit(this); editor.setReadOnly(true);//wyłączenie możliwości edycji editor.setShowPrintMargin(false);//wyłączenie wyświetlania marginesu drukowania editor.getSession().setUseWorker(false);//wyłączenie podświetlania błędów składni editor.getSession().setUseWrapMode(true);//włączenie zawijania wierszy editor.commands.removeCommand("find");//wyłączenie okna wyszukiwania pod guzikami CTRL+F editor.setHighlightActiveLine(false);//wyłączenie podświetlenia aktywnej linii editor.setOptions({maxLines: Infinity});//włączenie autodopasowania wysokości okna var ace_theme = jQuery(this).attr("ace-theme"); if (ace_theme === undefined) { ace_theme = 'twilight'; } editor.setTheme('ace/theme/' + ace_theme); var ace_mode = jQuery(this).attr("ace-mode"); if (ace_mode === undefined) { ace_mode = 'html'; } editor.getSession().setMode('ace/mode/' + ace_mode); var ace_gutter = jQuery(this).attr("ace-gutter"); if (ace_gutter === undefined) { ace_gutter = true; } editor.renderer.setShowGutter(ace_gutter); jQuery(this).show();//wyświetlenie bloku gdy został zainicjowany (opcjonalnie) } ); });

W linijkach od 8 do 14, kod został uzupełniony o dodatkowe definicje. Dzięki nim wyłączone zostały funkcjonalności edytora, które w trybie tylko do odczytu są niepotrzebne. W komentarzu do nich zostały ujęte informacje za co są one odpowiedzialne.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Tematyka Artykułów

Popularne Tagi

Back to top