Preview HTML#

Podstawowe informacje#

Instalacja#

Proces instalacji wtyczki przebiega w sposób standardowy. Finalnie na całą wtyczkę składają się następujące pliki i foldery:

Instalowanie wtyczki poprzez okno Zarządzanie wtyczkami pobiera nadmiarowe pliki. Proponuję dwa ostatnie pliki usunąć lub przenieść w inne miejsce.

Menu wtyczki#

U góry na Pasku menu plugin tworzy następujące menu wtyczki:

Preview HTML - menu wtyczki w domyślnym stanie

Rysunek. Preview HTML - menu wtyczki w domyślnym stanie

Opis#

Wtyczka tworzy własne dokowalne okno z wizualnym (wyrenderowanym) podglądem dla aktualnie wybranego pliku. Domyślnie obsługiwane są tylko pliki HTML lub XHTML, ale zachowanie to można rozszerzać odpowiednimi filtrami. Otrzymujemy zatem coś na wzór przeglądarki internetowej ulokowanej bezpośrednio w programie NPP. Samodzielne okno lub panel osadzony w kontenerze aktywujemy wybierając u góry na Pasku menu kolejno Wtyczki >> Preview HTML >> Preview HTML (domyślny skrót Ctrl+Shift+H) lub klikając przycisk Preview HTML - ikonka podglądu dokumentu na Pasku narzędzi.

Preview HTML - panel wtyczki w dolnym kontenerze

Rysunek. Preview HTML - panel wtyczki w dolnym kontenerze

Zawartość okna z podglądem dla aktualnie wybranego pliku jest automatycznie synchronizowana z jego zawartością z Obszaru edycji, a domyślne odświeżanie wynosi 1000 ms (czyli 1 s). Po wprowadzeniu zmian w Obszarze edycji podgląd zostanie uaktualniony (nie trzeba nawet zapisywać pliku). Czas odświeżania podglądu można zmienić; wystarczy utworzyć plik NPP\plugins\PreviewHTML\Settings.ini lub wybrać w menu wtyczki polecenie Edit settings, a następnie wprowadzić poniższą treść (cyfra 0 oznacza całkowity brak odświeżania):

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
[Autorefresh]
Interval=500

Okno z podglądem dla aktualnie wybranego pliku zawiera cztery dodatkowe przyciski ulokowane na samym jego dole. Spełniają one następujące zadania:

Między przyciskami []Freeze a ? znajduje się Pasek stanu, podobny do tego z przeglądarek internetowych. Domyślnie zawiera on napis Gotowe, ale po najechaniu w oknie podglądu na jakimś odsyłaczu wyświetli się jego adres (tj. zawartość atrybutu href). Pojedyncze kliknięcie lewym przyciskiem myszy na odsyłaczu powoduje jego otworzenie w domyślnej przeglądarce internetowej. Trzeba wyraźnie zaznaczyć, że w tym osobliwym przypadku nie działają lokalne adresy (tj. te z protokołem file://).

Preview HTML - panel wtyczki po najechaniu na odsyłacz `Storna domowa`

Rysunek. Preview HTML - panel wtyczki po najechaniu na odsyłacz `Storna domowa`

Pasek stanu bardzo często potrafi zniknąć, szczególnie kiedy najedziemy na jakimś odsyłaczu i klikniemy na przycisku Refresh lub przełączamy się na inny plik. Wygląda to na jakiś drobny błąd w samej wtyczce. Można go szybko naprawić na kilka sposobów, m.in. poprzez kliknięcie na przycisku Refresh, kilkukrotne przełączenie się między różnymi plikami lub kilkukrotne włączenie/wyłączenie okna z podglądem.

Oczywiście okno z podglądem pliku obsługuje także bardziej rozbudowane strony HTML, niż te zaprezentowane w powyższych przykładach. Możemy śmiało korzystać z kodu CSS i JS, aczkolwiek efekt ich działania bezpośrednio w oknie z podglądem pliku będzie silnie ograniczany przez zainstalowaną przeglądarkę IE.

Preview HTML - podgląd rozbudowanego dokumentu HTML (zawiera pliki CSS i JS)

Rysunek. Preview HTML - podgląd rozbudowanego dokumentu HTML (zawiera pliki CSS i JS)

Wtyczkę cechuje dość wolny rozwój, przez co zawiera ona sporo nierozwiązanych do tej pory błędów. Z tych najbardziej istotnych można wymienić:

Silnik renderowania#

W dużym uproszczeniu można powiedzieć, że wtyczka do generowania podglądu dla aktualnie wybranego pliku wykorzystuje zainstalowaną w systemie przeglądarkę z rodziny Internet Explorer. Nie ma możliwości zmiany przeglądarki na inną rodzinę, np. Chrome czy Firefox. Tuż po zainstalowaniu wtyczka wykrywa w naszym systemie operacyjnym bieżącą wersję przeglądarki IE (w oparciu o plik IEXPLORE.EXE lub wpis w rejestrze HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\svcVersion) i wybiera ją jako aktualny silnik renderowania. Dokładny numer wykrytej przeglądarki internetowej można sprawdzić wybierając z menu wtyczki polecenie About.

Preview HTML - okno About z podstawowymi informacjami o wtyczce

Rysunek. Preview HTML - okno About z podstawowymi informacjami o wtyczce

Poprzez menu wtyczki możemy przełączyć się na starsze wersje przeglądarki IE, ale jest to realizowane z wykorzystaniem tzw. trybu zgodności dostępnego w bieżącej wersji przeglądarki IE. Zmiana trybu zgodności wymaga ponownego uruchomienia programu NPP, o czym zostaniemy poinformowani specjalnym oknem modalnym.

Preview HTML - okno modalne z informacją o zmianie silnika renderowania

Rysunek. Preview HTML - okno modalne z informacją o zmianie silnika renderowania

Warto podkreślić, że zmiana trybu zgodności w bieżącej wersji przeglądarki nigdy nie odzwierciedli kompletnego zachowania poprzedniczki. W zasadzie jest to pewna forma emulacji, która i tak w paru (skrajnych) przypadkach zawodzi. W razie potrzeby, kiedy tworzony przez nas projekt koniecznie musi działać w starszych wersjach IE, najlepszym wyjściem będzie postawienie osobnych systemów lub wirtualnych maszyn dla każdej z nich.

Szczegóły#

Od strony czysto technicznej wtyczka wykorzystuje windowsowy interfejs WebBrowser (szczegóły). Jest on na stałe wbudowany w system operacyjny i może być wykorzystywany przez inne aplikacje (np. przeglądarkę IE). Od wersji ósmej interfejs pozwala emulować działanie poprzednich wersji. Ustawienie trybu zgodności odbywa się osobno dla każdej aplikacji (tj. dla jej binarnego pliku .exe), co oznacza, że jeśli inna wtyczka programu NPP przełączy tryb zgodności, to zastosowana zostanie ostatnia tego typu zmiana. Nie można również używać różnych trybów zgodności dla różnych dokumentów. Ponieważ to ustawienie jest odczytywane tylko raz, po uruchomieniu aplikacji, to zawsze konieczne będzie ponowne uruchomienie NPP, zanim nowe ustawienie zostanie zaobserwowane. Aktualnie wybrany tryb zgodności dla programu NPP zapisywany jest w systemowym rejestrze (szczegóły), a dokładniej w dwóch kluczach:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION\notepad++.exe
HKEY_USERS\S-1-5-21-3538213152-4266491280-3531887582-1000\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION\notepad++.exe

Przy użyciu poniższego kodu możemy sprawdzić, jaki User Agent zostanie ustawiony dla każdego z trybów zgodności:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<html>
	<body>
		<script>
			document.write(navigator.userAgent);
		</script>
	</body>
</html>

W moim przypadku dla poszczególnych trybów zgodności zwrócone zostały następujące wartości:

Tryb emulacjiUser AgentWartość klucza notepad++.exe Hex (Dec)
View as IE7Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; .NET4.0C; .NET4.0E)0x00001b58(7000)
View as IE8Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko0x00001f40 (8000)
View as IE9Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko0x00002328 (9000)
View as IE10Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko0x00002710 (10000)
View as IE11Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko0x00002af8 (11000)

Zmiana silnika renderowania na coś bardziej aktualnego (np. Chromium czy Firefox), choć teoretycznie możliwa, wiąże się z wieloma komplikacjami. Ich bazowe komponenty nie są wbudowane w system operacyjny i koniecznym byłoby umieszczanie ich bezpośrednio w pliku wtyczki, co zwiększyłoby rozmiar wtyczki o wiele rzędów wielkości, a ponadto wymagałoby dodatkowego utrzymywania aktualności i kompatybilności z nowszymi wersjami tych komponentów. Jest niewielka szansa na wszczepienie innego silnika renderowania, a jeśli już to ewentualnie będzie to Chromium, o czym wielokrotnie informował autor wtyczki w różnych błędach:

Zamiast wyczekiwać na coś, co raczej nigdy się nie spełni, do testowania kodu w aktualnych przeglądarkach internetowych warto sięgnąć po alternatywne narzędzia.

Filtry#

Przy domyślnych ustawieniach podgląd jest generowany tylko dla plików z rozszerzeniami: HTML, HTM i XHTML. Ogólnie rzecz biorąc to istotna jest aktualnie wybrana składnia dla danego pliku w programie NPP, i aby podgląd działał musi to być język HTML. W razie potrzeby można wymusić wygenerowanie podglądu dla dowolnego pliku wybierając u góry na Pasku menu z pozycji Składnia stosowny język. Tam gdzie podgląd nie ma zastosowania wyświetlony zostanie komunikat (not preview available).

Preview HTML - plik Filters.sample.ini bez wygenerowanego podglądu

Rysunek. Preview HTML - plik Filters.sample.ini bez wygenerowanego podglądu

Zgodnie z oficjalnym opisem wtyczki generowanie podglądu powinno działać także dla plików XML zawierających instrukcje przetwarzania, ale w praktyce tak się nie dzieje i dostajemy komunikat (not preview available). Przynajmniej tak było w moim przypadku, ale nie mam całkowitej pewności czy błąd nie leżał po mojej stronie.

Filtry pozwalają wygenerować podgląd dla dowolnego pliku. Definicje filtrów umieszcza się w pliku NPP\plugins\Config\PreviewHTML\filters.ini. Każdy filtr odpowiada za tymczasową konwersję zawartości aktualnie wybranego pliku na jakiś inny format ("zjadliwy" dla przeglądarki IE - najlepiej HTML), który potem zostanie wyświetlony w oknie podglądu. Dokładna instrukcja tworzenia filtrów znajduje się w oficjalnym opisie filtrów. Jest ona na tyle szczegółowa, że nie ma sensu ponownie powielać treści. Własne filtry można wykorzystać na wiele sposobów, np. do wizualnego podglądu popularnych ostatnio plików Markdown czy reStructuredText.

Alternatywa#

Trzeba wyraźnie zaznaczyć, że opisywana wtyczka nie nadaje się do rzeczywistego testowania interfejsów w nowoczesnych projektach, a to ze względu na używany przez nią przestarzały silnik renderowania z przeglądarki IE. W tej sytuacji tworzony przez nas kod należałoby testować bezpośrednio w docelowej grupie obsługiwanych przeglądarek internetowych. Istnieje wiele sposobów pozwalających osiągnąć ten cel, ja osobiście korzystam z tandemu Firefox, Node.js i Notepad++.

Mimo powyższej ułomności wtyczka znakomicie sprawdza się do tworzenia podglądu dla mniej skomplikowanych plików, jak wspomniane wcześniej Markdown czy reStructuredText. Dzięki filtrom możemy samodzielnie sprzęgnąć NPP z dowolną biblioteką konwertującą jakiś egzotyczny format pliku do postaci HTML, który to zostanie wyświetlony w oknie podglądu. Nawet w gotowych projektach bazujących na HTML-u, gdzie interfejs został już wytestowany przy użyciu innych narzędzi, wtyczkę można wykorzystać np. do szybkiego podglądu dodawanej treści. Wszystko tak naprawdę będzie zależne od tego, czy zainstalowana wersja IE wyświetli nasz projekt w takiej formie, która umożliwi nam jego późniejsze rozwijanie.

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Preview HTML (H1) Podstawowe informacje (H2) Instalacja (H2) Menu wtyczki (H2) Opis (H2) Silnik renderowania (H3) Szczegóły (H4) Filtry (H3) Alternatywa (H2)