Les coulisses du Techdays 2014 : Colorisation de code

Article
12/20/2013

20 Décembre 2013, J-53 avant l’édition des Techdays 2014. J’ai pris un peu de retard sur mes prévisions, car j’ai travaillé en parallèle, sur un projet autour de l’Oculus Rift qui m’a pris un peu de temps. J’y reviendrais dans un prochain billet, et vous devriez en voir le résultat aux Techdays.

Comme je le précisais dans mon précédant billet, je m’attèle à développer une application afin d’illustrer les nouvelles APIS disponibles avec le Windows Runtime 8.1.

Dans ce 1er billet j’expliquais comment intégrer MEF 2.0, afin de pouvoir charger dynamiquement chaque exemple.

Dans ce second exemple nous allons aborder la coloration syntaxique des exemples.

Pour que les exemples soient plus parlant, je veux pouvoir afficher le code des exemples, et pour qu’ils soient le plus lisible possible réutiliser les jeux de couleurs par défaut de C# et XAML.

Comme illustrer sur la figure suivante pour du code CSharp

Ou pour du code XAML

Pour ce faire, j’ai donc développé un composant C++ qui :

Pour du code C#, parse une 1er fois le texte pour en extraire tous les jetons, puis je fais une seconde passe qui formate le texte au format RTF. (J’ai choisi ce format, car je peux ainsi sauvegarder un document que je peux relire avec Word sans perte d’informations).

Alors comment ça marche ?

Tout d’abord je tiens à préciser que je n’ai utilisé aucune méthode connue ou reconnue pour faire de l’analyse syntaxique ni de lex & yacc ou Expressions régulières

Je lis tout bêtement ligne par ligne, puis caractère par caractère , l’intégralité du texte (oui je sais c’est pas bô), mais avec la stl, c’est rapide !!

L’intégralité des jetons sont sauvegardés dans des vecteurs de types stl, que je réutilise dans une seconde méthode qui formate tous les jetons avec la couleur souhaitée.

Néanmoins, comme je n’ai pas la prétention de refaire ce qui est fait dans l’éditeur Visual Studio, je m’appui également sur un fichier de ressources qui contient les éléments de base pour formater correctement en RTF, ainsi que les couleurs que je souhaite affecter à chaque jetons. Ce fichier de ressources, contient également un certain nombre de mots clés au langage pré-formaté à la bonne couleur (bleu par exemple pour les mots clés standard du langage). Il est donc possible à tout moment de rajouter un mot clé, ou de modifier une couleur si les couleurs de bases ne conviennent pas.

Pour de plus amples informations sur le format RTF c’est ici.

Voici comment ce fichier se présente :

Code Snippet

<RTFDoc>
<OpenRtfTag Value="{\rtf1\ansi"/>
<CloseRtfTag Value="}" />
<ColorTable Value="{\colortbl;\red0\green0\blue255;\red0\green255\blue0;\red43\green145\blue175;\red0\green0\blue0;\red163\green21\blue21;\red0\green128\blue0;}}"/>
<FontTable Value="{\fonttbl {\f0 Consolas;}"/>
<Paragraphe Value="\par"/>
<ColorComment Value="\f0\cf6"/>
<ColorCharsString Value="\f0\cf5"/>
<Black Value="\f0\cf4"/>
<ColorKeyWord Value="\f0\cf1"/>
<ColorType Value="\f0\cf3"/>
<namespace Value="\f0\cf1"/>
<using Value="\f0\cf1"/>
<class Value="\f0\cf1"/>
<interface Value="\f0\cf1"/>
<public Value="\f0\cf1"/>
<static Value="\f0\cf1"/>
<internal Value="\f0\cf1"/>
<protected Value="\f0\cf1"/>
<override Value="\f0\cf1"/>
<private Value="\f0\cf1"/>
<sealed Value="\f0\cf1"/>
<partial Value="\f0\cf1"/>
<readonly Value="\f0\cf1"/>
<typeof Value="\f0\cf1"/>
<add Value="\f0\cf1"/>
<remove Value="\f0\cf1"/>
<lock Value="\f0\cf1"/>
<yield Value="\f0\cf1"/>
<object Value="\f0\cf1"/>
<Object Value="\f0\cf3"/>
<async Value="\f0\cf1"/>
<await Value="\f0\cf1"/>
<new Value="\f0\cf1"/>
<var Value="\f0\cf1"/>
<for Value="\f0\cf1"/>
<do Value="\f0\cf1"/>
<try Value="\f0\cf1"/>
<catch Value="\f0\cf1"/>
<finally Value="\f0\cf1"/>
<while Value="\f0\cf1"/>
<return Value="\f0\cf1"/>
<get Value="\f0\cf1"/>
<set Value="\f0\cf1"/>
<value Value="\f0\cf1"/>
<const Value="\f0\cf1"/>
<ref Value="\f0\cf1"/>
<event Value="\f0\cf1"/>
<delegate Value="\f0\cf1"/>
<Delegate Value="\f0\cf3"/>
<if Value="\f0\cf1"/>
<foreach Value="\f0\cf1"/>
<else Value="\f0\cf1"/>
<in Value="\f0\cf1"/>
<int Value="\f0\cf1"/>
<bool Value="\f0\cf1"/>
<Boolean Value="\f0\cf3"/>
<false Value="\f0\cf1"/>
<true Value="\f0\cf1"/>
<double Value="\f0\cf1"/>
<char Value="\f0\cf1"/>
<Char Value="\f0\cf3"/>
<single Value="\f0\cf1"/>
<long Value="\f0\cf1"/>
<string Value="\f0\cf1"/>
<String Value="\f0\cf3"/>
<byte Value="\f0\cf1"/>
<enum Value="\f0\cf1"/>
<readonly Value="\f0\cf1"/>
<as Value="\f0\cf1"/>
<base Value="\f0\cf1"/>
<break Value="\f0\cf1"/>
<case Value="\f0\cf1"/>
<checked Value="\f0\cf1"/>
<default Value="\f0\cf1"/>
<extern Value="\f0\cf1"/>
<explicit Value="\f0\cf1"/>
<out Value="\f0\cf1"/>
<operator Value="\f0\cf1"/>
<params Value="\f0\cf1"/>
<sbyte Value="\f0\cf1"/>
<short Value="\f0\cf1"/>
<uint Value="\f0\cf1"/>
<ulong Value="\f0\cf1"/>
<unchecked Value="\f0\cf1"/>
<unsafe Value="\f0\cf1"/>
<virtual Value="\f0\cf1"/>
<volatile Value="\f0\cf1"/>
<decimal Value="\f0\cf1"/>
<do Value="\f0\cf1"/>
<switch Value="\f0\cf1"/>
<is Value="\f0\cf1"/>
<stackalloc Value="\f0\cf1"/>
<goto Value="\f0\cf1"/>
<short Value="\f0\cf1"/>
<select Value="\f0\cf1"/>
<into Value="\f0\cf1"/>
<orderby Value="\f0\cf1"/>
<from Value="\f0\cf1"/>
<yield Value="\f0\cf1"/>
<join Value="\f0\cf1"/>
<where Value="\f0\cf1"/>
<group Value="\f0\cf1"/>
<let Value="\f0\cf1"/>
<Byte Value="\f0\cf3"/>
<Type Value="\f0\cf3"/>
<void Value="\f0\cf1"/>
<this Value="\f0\cf1"/>
<null Value="\f0\cf1"/>
<throwValue="\f0\cf1"/>
<NumberSign Value="\f0\cf1"/>
<UInt32 Value="\f0\cf3"/>
<Int32 Value="\f0\cf3"/>
<Int16 Value="\f0\cf3"/>
<Int64 Value="\f0\cf3"/>
<IntPtr Value="\f0\cf3"/>
<UIntPtr Value="\f0\cf3"/>
<UInt16 Value="\f0\cf3"/>
<UInt64 Value="\f0\cf3"/>
<IBuffer Value="\f0\cf3"/>
<LeftCurlyBracket Value="\f0\cf4\{" />
<RightCurlyBracket Value="\f0\cf4\}" />
</RTFDoc>

Ce fichier est composé d’un formatage minimum

Un attribut permettant d’ouvrir le format RTF - OpenRtfTag

Un attribut permettant de fermer le format RTF - CloseRtfTag

Un attribut ColorTable définissant la table des couleurs

Un attribut FontTable définissant la table des fontes

L’attribut ColorType pour la couleur des types

Les autres attributs définissent soit des couleurs pour des mots clés, soit pour des commentaires (ColorComment), soit pour illustrer une chaine de caractères (ColorCharsString)

Vite fait comment ça marche le format RTF.

Par exemple l’attribut ColorComment déclare la valeur “\f0\cf6” cela veut dire que l’on va prendre :

La fonte position 0 dans la table des fontes en l’occurrence Consolas

La couleur en position 6, soit red0\green128\blue0, le fameux vert caractéristiques des commentaires dans Visual Studio.

Et ainsi de suite pour les autres attributs

En C# pour appeler mon composant c’est simple comme illustrer dans le code suivant :

Code Snippet

char[] separator = { '\n', '\r' };
String[] lines = allText.Split(separator, StringSplitOptions.RemoveEmptyEntries);
Ultimate.Parser.IParse cs = new Ultimate.Parser.CSharp();
rtf = await cs.ParseCodeAsync(lines, new Uri("ms-appx:///Resources/RTFCSFormat.xml"));

La méthode ParseCodeAsync() , prend comme 1er paramètre un tableau contenant chaque lignes de code C#, ainsi qu’une URI pointant sur mon fichier de ressources et retourne une chaine de caractères au format RTF. A partir de là il suffit soit d’afficher le résultat dans un RichTextBox, soit de le sauvegarder dans un fichier.

La méthode ParseCodeAsync() en faite, ne fait pas grand chose, elle sert uniquement d’intermédiaire entre C# et C++ car tout le code de parsing est en ISO C++, et non pas en C++/CX propre au Windows Runtime.

Code Snippet

IAsyncOperation<Platform::String^>^ CSharp::ParseCodeAsync(const Platform::Array<Platform::String^>^ codetoparse,
Windows::Foundation::Uri^ uri)
{
return create_async([&uri,codetoparse, this]()
{
this->ParseTokens(codetoparse);
return this->FormatRTFAsync(uri);
});
}

Pour la colorisation de code xaml, c’est peu ou prou la même chose, à l’exception du fait que je délègue le parsing des jetons à la librairie XMLLite qui à besoin en entrée d’un flux de données, plutôt qu’un tableau de chaine de caractères.

Voici en C# comment on y fait appel :

Code Snippet

Ultimate.Parser.IParse xaml = new Ultimate.Parser.XAML();
var xamlFile = await ApplicationData.Current.LocalFolder.CreateFileAsync("tempofile.xaml", CreationCollisionOption.ReplaceExisting);
await Windows.Storage.FileIO.WriteTextAsync(xamlFile,allText);
rtf = await xaml.ParseCodeAsync(xamlFile, new Uri("ms-appx:///Resources/RTFXAMLFormat.xml"));

Et voici la définition de la méthode C++/CX

Code Snippet

IAsyncOperation<Platform::String^>^ XAML::ParseCodeAsync(Windows::Storage::StorageFile^ file,
Windows::Foundation::Uri^ uri)
{
return create_async([file,&uri, this]()
{
task<StorageFile^> getFileTask(Windows::Storage::StorageFile::GetFileFromApplicationUriAsync(uri));
return getFileTask.then([file,this](StorageFile^ ressourcefile)
{
return ressourcefile->OpenAsync(FileAccessMode::Read);
}, task_continuation_context::use_arbitrary()).then([file, this](IRandomAccessStream^ stream)
{
m_common = std::unique_ptr<Common>(new Common());
HRESULT hr = m_common.get()->InitXmlReader(stream);
if (FAILED(hr))
{
throw ref new Platform::Exception(E_FAIL, ref new String(L"Erreur lors de la lecture du fichier de ressources XML"));
}
}, task_continuation_context::use_arbitrary()).then([file, this]()
{
return file->OpenAsync(FileAccessMode::Read);
}, task_continuation_context::use_arbitrary()).then([this](IRandomAccessStream^ stream)
{
std::wstring rtf = this->FormatXAMLRTF(stream);
StringReference sr(rtf.c_str());
return sr.GetString();
});
});
}

J’ai volontairement omis le code de parsing, mais que vous pourrez retrouver ici.

Dans le prochain billet nous aborderons la partie la plus sensible, c’est à dire la sauvegarde du code dans une base de données au format ESE.

Eric

Les coulisses du Techdays 2014 : Colorisation de code

Additional resources