HighlightKolejna zmiana na blogu na lepsze. Wcześniej do koloryzowania składni kodu na blogu korzystałem z trzech technik.
Każda z nich okazała się kiepska. Jedna z nich przestała nawet działać gdyż BlogEngine przestał wspierać SyntaxHiglighter.
Przez wiele miesięcy siłowałem się z koloryzowaniem składni kodu Objective-C. SyntaxHiglighter nie wspierał tego języka programowania. Technika koloryzowania składni z której zazwyczaj korzystam nie działała ze względu na to, że nie można zainstalować Windows Live Writera na komputerach MAC.
Postanowiłem do bloga dodać nowe koloryzowanie. Dużo się zmieniło na przestrzeni lat. Teraz widzę, że te rozwiązanie rozwiązuje wiele problemów. Mówię tutaj o koloryzowaniu składni przy użyciu Highlight js.
#import <Foundation/Foundation.h>
#import "Printing.h"
@interface TextDocument : NSObject<Printing>
- (id)initWithText:(NSString *)aText;
- (BOOL)saveAS:(NSString *)fileName toPath:(NSString *)filePath;
@property (nonatomic,copy) NSString *text;
@endNajwiększą zaletą Higlight js jest możliwość tworzenia własnych styli koloryzowania składni. Jak widzisz pod kodem znajdują się przyciski. Większość styli jest domyślnie dodana do Highlight js.
Dla zabawy jednak napisałem koloryzowanie składni jakbyśmy programowali na Amidze lub Commodore 64. Style te raczej nie mają zastosowania w prawdziwym życiu, ale miałem wielką frajdę je tworząc.
Będę także szczery i przerobiłem trochy styl Visual Studio bo ten oferowany przez Higlight jsbył dziurawy zwłaszcza jeśli chodzi o koloryzowanie styli CSS.
Tak samo postąpiłem ze stylem XCODE oznaczony młotkiem i śrubokrętem. Miał on pewne niedoskonałości.
Na blogu w przeszłości głównie korzystałem z pluginu w Windows Live Writer VSPaste. Pozwala on na koloryzowanie kodu ze schowka dokładnie tak jak był on podkoloryzowany w edytorze Visual Studio lub Eclipse.
Korzystanie z tego pluginu okazało się jednak za bardzo uciążliwe. Zwłaszcza, że Visual Studio od wersji 2012 zaczął dodawać do kodu białe tło.
Inna sprawa te rozwiązanie rodzi wiele problemów.
Kod do testowaniaint a = 0; for (int i = 0; i <= 6; i++) { for (int j = 10; j > 0; j--) { if ((i == 0) || (i == 6)) Console.Write("*******"); else if ((i == 2) || (i == 4)) Console.Write("** **"); else Console.Write("* * *"); } Console.WriteLine(); }
Styl kod jest wbudowany w HTML. Oznacza to, że nie można globalnie zmienić tych stylów. Nie ma w nich klas CSS. Tak jak wkleję kod taki on będzie.
<blockquote class="csharpBlockquote">
<strong>Kod do testowania</strong>
<pre class="code"><span style="color: blue">int </span>a = 0;
<span style="color: blue">for </span>(<span style="color: blue">int </span>i = 0; i <= 6; i++)
{
<span style="color: blue">for </span>(<span style="color: blue">int </span>j = 10; j > 0; j--)
{
<span style="color: blue">if </span>((i == 0) || (i == 6))
<span style="color: #2b91af">Console</span>.Write(<span style="color: #a31515">"*******"</span>);
<span style="color: blue">else if </span>((i == 2) || (i == 4))
<span style="color: #2b91af">Console</span>.Write(<span style="color: #a31515">"** **"</span>);
<span style="color: blue">else </span><span style="color: #2b91af">Console</span>.Write(<span style="color: #a31515">"* * *"</span>);
}
<span style="color: #2b91af">Console</span>.WriteLine();
}</pre>
</blockquote>Edycja tego czegoś też nie jest łatwa. Znaki spacji i nowej linii są tutaj święte. Był to jeden z powodów dla których uciekłem od “Bloggera” bo on tutaj chrzanił składnie HTML.
Co gorsza całą składnie kodu jeszcze opakowuje w tag “blogquote” by dodać do kodu symbol określający jaki język programowania jest tutaj użyty.
Muszę to zrobić ręcznie.
Z tych wszystkich wad największą zaletą tej techniki jest możliwość koloryzowania także specyficznych klas.
Przykładowo highlight js oczywiście nie wie, że Console to klasa i powinien ją po koloryzować.
Console.BackgroundColor = ConsoleColor.DarkBlue;
Console.WriteLine("Witaj w C#");Hello WorldConsole.BackgroundColor = ConsoleColor.DarkBlue; Console.WriteLine("Witaj w C#");
Nie ma jednak co ukrywać, że technika VSPaste musi pójść do kosza. Jeśli plugin przestanie mi działać w którejś edycji Windows Live Writer albo Windows to nie będę mógł już z tej techniki korzystać.
Na przestrzeni egzystencji bloga korzystałem jeszcze z innego pluginu generującego kod. Ten akurat istniał w samym Visual Studio. Był on jeszcze trudniejszy w użyciu więc nie będę sobie próbował przypomnieć jak on się nazywał.
Przejdźmy więc do prezentacji rozwiązania hightlight js.
Przykład Java
Oto jak koloryzowanie składni wyglądało wcześniej.
public class JavaIsWeird { public static void main(String[] args) { Integer i = 100; Integer p = 100; if (i == p) System.out.println("i i p są takie same. Mają ten sam obiekt"); if (i != p) System.out.println("i i p są różne. Mają różne obiekty."); if(i.equals(p)) System.out.println("i i p zawierają tą samą wartość."); } }
A tak obecnie.
public class JavaIsWeird {
public static void main(String[] args) {
Integer i = 100;
Integer p = 100;
if (i == p)
System.out.println("i i p są takie same. Mają ten sam obiekt");
if (i != p)
System.out.println("i i p są różne. Mają różne obiekty.");
if(i.equals(p))
System.out.println("i i p zawierają tą samą wartość.");
}
}Przykład CSS
Style CSS były zawsze najbardziej pojemne jeśli chodzi o style CSS wbudowane w HTML. Sprawdziłem te poniższe wyrażenie. W kodzie HTML zajmuje on 2015 znaków. Licząc spacje 2196.
body { padding-top: 50px; padding-bottom: 20px; } /* Set padding to keep content from hitting the edges */ .body-content { padding-left: 15px; padding-right: 15px; } /* Set width on the form input elements since they're 100% wide by default */ input, select, textarea { max-width: 280px; } .center-table thead th, .center-table tbody tr td { text-align: center; vertical-align: central !important; } .marginTop { margin-top: 15px; }
Ten kod HTML przerobiony później skryptem hightlight js zajmuje tylko 431 znaków. Prawie pięć razy mniej niż wcześniej.
body {
padding-top: 50px;
padding-bottom: 20px;
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
.center-table thead th, .center-table tbody tr td {
text-align: center;
vertical-align: central !important;
}
.marginTop {
margin-top: 15px;
}Jestem tak zadowolony z tego rozwiązania, że być może w przyszłości omówię jak highlight js działa i jak można stworzyć swój własny styl bądź zmienić istniejący. Co już zrobiłem.
Jeden problem z koloryzowaniem składni: brak T4
Highlight js obsługuje składnie wielu języków programowania. Znajdują się w nim nawet takie języki programowania jak: F#, MatLab, PowerShell, VBScript, VB.NET, Oracle, Swift, TeX, TypeScript.
Istnieje nawet koloryzowanie składni dla pomocniczych języków do styli CSS jak SCSS i LESS.
Niestety nawet na takiej liście czegoś brakuje.
Po pierwsze Highlight js nie obsługuje koloryzowanie składni Razor, która występuje w ASP.NET MVC. Na szczęście można to naprawić dodając jeden globalny styl CSS, który będzie podkreślał znak małpy na żółto. Trzeba jeszcze do skryptu dodać parę linijek kodu i problem rozwiązany.
Ktoś już rozwiązał ten problem więc nie trzeba się głowić.
http://www.namedquery.com/project/razor-language-pack-highlight-js
Ja sam dodałem też prostą instrukcję:
http://www.cezarywalenciuk.pl/post/2014/12/06/Razor-HTML-i-Highlight-js-kolorowanie-skladni.aspx
Bardziej mnie zmartwił brak koloryzacji składni T4.
<#@ template debug="true" hostSpecific="true" #> <#@ output extension="txt" #> Squares: <# for(int i = 0; i < Square(2); i++) { #> The square of <#= i #> is <#= Square(i+1) #>. <# } #> <#+ // Start of class feature block private int Square(int i) { return i*i; } #>
Być może w przyszłości sam napiszę obsługę tej składni.
SQL
INSERT INTO [dbo].[Region]
([RegionId]
,[Name])
VALUES
(1,'Europe'),(2,'Asia'),(3,'Africa'),
(4,'South America'),(5,'North America'),(6,'Australia')
INSERT INTO [dbo].[Country]
([CountryId]
,[Name]
,[RegionId])
VALUES
(1,'Poland',1),(2,'Japan',2),
(3,'Algeria',3),(4,'Argentina',4),
(5,'New Zealand',NULL),(6,'Federated States of Micronesia',NULL)
Obecnie przede mną prawdziwe zadanie herkulesa. Muszę w 350 wpisach zmienić składnia z VSPaste na tą z highlight js. Obecnie zmieniłem może 1/4 wpisów. To nie jest proces, który potrwa tylko kilka dni.
