🎨 Use Fira Code for listings

figures/email-src-hbs.tex

@@ -1,5 +1,5 @@
 \begin{figure}
-  \begin{lstlisting}[language=hbs, numbers=none, backgroundcolor=\color{bgColor}, breaklines=true, basicstyle=\small]
+  \begin{lstlisting}[language=hbs, numbers=none]
 {{#>mint.main}}
   {{#>mint.title}}
     Bienvenue [[surname]] [[name]]

figures/email-src-mjml.tex

@@ -1,5 +1,5 @@
 \begin{figure}
-  \begin{lstlisting}[language=xml, numbers=none, backgroundcolor=\color{bgColor}, breaklines=true, basicstyle=\small, showstringspaces=false]
+  \begin{lstlisting}[language=xml, numbers=none]
 <mjml>
 <mj-head>
   <!-- ... -->

figures/email.tex

@@ -10,7 +10,7 @@
   \end{subfigure}
 
   \begin{subfigure}[t]{\textwidth}
-    \begin{lstlisting}[language=hbs, numbers=none, backgroundcolor=\color{bgColor}, breaklines=true, basicstyle=\small]
+    \begin{lstlisting}[language=hbs, numbers=none]
 Bienvenue Paul Durant
 
 Nous sommes heureux de vous accompagner lors de votre séjour en vous proposant du divertissement.

figures/fromeffectloop.tex

@@ -1,6 +1,6 @@
 \begin{figure}
   \begin{subfigure}[t]{\textwidth}
-    \begin{lstlisting}[style=JavaScript]
+    \begin{lstlisting}[language=JavaScript]
 function useCategoryCache() {
   const [cache, setCache] = React.useState<Record<string, Category>>({});
 
@@ -47,12 +47,12 @@ const Page = (props) => {
 
   \begin{subfigure}[t]{0.45\textwidth}
     \includegraphics[width=\textwidth]{fromeffectloop}
-    \caption{Les flèches correspondent à un appel, les points à une dépendance}
+    \caption{Schéma des dépendances et des appels: une flèche correspond à un appel, un point à une dépendance}
   \end{subfigure}
   \hfill
   \begin{subfigure}[t]{0.45\textwidth}
-    \includegraphics[width=0.3\textwidth]{fromeffectloop2}
-    \caption{TODO}
+    \includegraphics[width=\textwidth]{fromeffectloop2}
+    \caption{\og Flame graph \fg abstrait des appels}
   \end{subfigure}
   \caption{Version simplifiée du bug causant plusieures requêtes à être executées}
   \label{fromeffectloop}

figures/hbs1.tex

@@ -1,27 +1,27 @@
 \begin{figure}[H]
   \begin{subfigure}[t]{0.45\textwidth}
-    \begin{lstlisting}[language=hbs, numbers=none, backgroundcolor=\color{bgColor}]
+    \begin{lstlisting}[language=hbs, numbers=none]
 <div>
     \end{lstlisting}
     \caption{Composant \entity{Mustache} \og \texttt{component\_start} \fg}
   \end{subfigure}
   \hfill
   \begin{subfigure}[t]{0.45\textwidth}
-    \begin{lstlisting}[language=hbs, numbers=none, backgroundcolor=\color{bgColor}]
+    \begin{lstlisting}[language=hbs, numbers=none]
 <div>{{@partial-block}}</div>
     \end{lstlisting}
     \caption{Composant \entity{Handlebars} \og \texttt{component} \fg}
   \end{subfigure}
 
   \begin{subfigure}[t]{0.45\textwidth}
-    \begin{lstlisting}[language=hbs, numbers=none, backgroundcolor=\color{bgColor}]
+    \begin{lstlisting}[language=hbs, numbers=none]
 </div>
     \end{lstlisting}
     \caption{Composant \entity{Mustache} \og \texttt{component\_end} \fg}
   \end{subfigure}
 
   \begin{subfigure}[t]{0.45\textwidth}
-    \begin{lstlisting}[language=hbs, numbers=none, backgroundcolor=\color{bgColor}]
+    \begin{lstlisting}[language=hbs, numbers=none]
 {{>component_start}}
   <p>Hello, world!</p>
 {{>component_end}}
@@ -30,7 +30,7 @@
   \end{subfigure}
   \hfill
   \begin{subfigure}[t]{0.45\textwidth}
-    \begin{lstlisting}[language=hbs, numbers=none, backgroundcolor=\color{bgColor}]
+    \begin{lstlisting}[language=hbs, numbers=none]
 {{#>component}}
   <p>Hello, world!</p>
 {{/component}}

figures/hbs2.tex

@@ -5,7 +5,7 @@
 \end{figure}
 
 \begin{figure}[H]
-    \begin{lstlisting}[language=hbs, numbers=none, backgroundcolor=\color{bgColor}]
+    \begin{lstlisting}[language=hbs, numbers=none]
 Hello, user!
 
 This is an automated email sent to you,

figures/nestjs1.tex

@@ -1,17 +1,17 @@
 
 \begin{figure}[H]
-  \begin{lstlisting}[style=JavaScript]
-  export abstract class IChildService {
+  \begin{lstlisting}[language=JavaScript]
+export abstract class IChildService {
   // ...
-  }
+}
 
-  @Injectable(IChildService)
-  export class ChildService implements IChildService {
+@Injectable(IChildService)
+export class ChildService implements IChildService {
   // ...
-  }
+}
 
-  @Injectable()
-  export class ParentService {
+@Injectable()
+export class ParentService {
   private childService: IChildService;
 
   constructor(
@@ -21,9 +21,9 @@
   }
 
   // ...
-  }
+}
 
-  @Module({
+@Module({
   providers: [
     ChildService,
     ParentService
@@ -31,8 +31,8 @@
   exports: [
     ParentService
   ]
-  })
-  export class ParentModule {}
+})
+export class ParentModule {}
   \end{lstlisting}
 
   \centering

figures/nestjs2.tex

@@ -1,15 +1,15 @@
 \begin{figure}[H]
-  \begin{lstlisting}[style=JavaScript]
-  @Injectable()
-  export class MyService {
+  \begin{lstlisting}[language=JavaScript]
+@Injectable()
+export class MyService {
   constructor(
     parentService: ParentService
   ) {
     // ...
   }
-  }
+}
 
-  @Module({
+@Module({
   imports: [
     // Comme ParentModule exporte ParentService,
     // ce service est facilement rendu disponible ici pour MyService:
@@ -18,8 +18,8 @@
   providers: [
     MyService
   ]
-  })
-  export class MyModule {}
+})
+export class MyModule {}
   \end{lstlisting}
 
   \centering

report.tex

@@ -5,11 +5,13 @@
 \usepackage[T1]{fontenc}
 \usepackage[a4paper, margin=0.7in]{geometry}
 \usepackage[french]{babel}
+\usepackage{xspace} % From https://tex.stackexchange.com/questions/150640/missing-space-after-guillemets
 \usepackage{amsmath}
 \usepackage{amsfonts}
 \usepackage{mathtools}
 \usepackage{mathabx}
 \usepackage{listings}
+\usepackage[many]{tcolorbox}
 \usepackage{xcolor}
 \usepackage{float}
 \usepackage{cite}
@@ -32,11 +34,27 @@
 % Requires xelatex to run (or maybe also lualatex)
 \usepackage{utbmcovers}
 
+\setmonofont[Contextuals={Alternate}]{Fira Code}
+\newfontfamily{\FiraCode}[Contextuals={Alternate}]{Fira Code}
+\IfFontExistsTF{Fira Code SemiBold}{
+  \newfontfamily{\FiraCodeSB}[UprightFont={* SemiBold}]{Fira Code}
+}{
+  \IfFontExistsTF{Fira Code Semi-Bold}{
+    \newfontfamily{\FiraCodeSB}[UprightFont={* Semi-Bold}]{Fira Code}
+  }{
+    \newfontfamily{\FiraCodeSB}[UprightFont={* Semibold}]{Fira Code}
+  }
+}
+
+
+\definecolor{kwColor}{rgb}{0.15,0.21,0.87}
+
 % From https://tex.stackexchange.com/questions/89574/language-option-supported-in-listings
 \lstdefinelanguage{JavaScript}{
   keywords={
     typeof, new,
     abstract, class, interface, type, function, return,
+    async, await,
     try, catch, finally,
     switch, case, break,
     var, let, const,
@@ -44,13 +62,13 @@
     for, while, in, of, do,
     true, false, null, undefined
   },
-  keywordstyle=\color{blue}\bfseries,
+  keywordstyle=\color{kwColor}\FiraCodeSB,
   ndkeywords={
     export, implements, import, this,
     private, public, readonly, constructor,
     @Inject, @Injectable, @Controller, @Module
   },
-  ndkeywordstyle=\color{darkgray}\bfseries,
+  ndkeywordstyle=\color{darkgray}\FiraCodeSB,
   identifierstyle=\color{black},
   sensitive=false,
   comment=[l]{//},
@@ -62,15 +80,16 @@
 }
 
 \lstdefinelanguage{hbs}{
-  morecomment=[s]{\{\{!}{!\}\}},
+  % morecomment=[s]{\{\{!}{!\}\}},
+  morecomment=[s]{<!--}{-->},
   commentstyle=\color{purple}\ttfamily,
   stringstyle=\color{red}\ttfamily,
   morestring=[s]{\{\{}{\}\}},
 }
 
 \definecolor{bgColor}{rgb}{0.95,0.94,0.92}
-\lstdefinestyle{JavaScript}{
-    backgroundcolor=\color{bgColor},
+\lstset{
+  % backgroundcolor=\color{bgColor},
   commentstyle=\color{gray},
   keywordstyle=\color{magenta},
   numberstyle=\tiny\color{gray},
@@ -86,7 +105,13 @@
   showstringspaces=false,
   showtabs=false,
   tabsize=2,
-    language=JavaScript
+}
+\tcolorboxenvironment{lstlisting}{
+  spartan,
+  frame empty,
+  boxsep=0mm,
+  left=1mm,right=1mm,top=-1mm,bottom=-1mm,
+  colback=bgColor,
 }
 
 \graphicspath{{build/figures/}{images/}}