🎨 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}
+    \includegraphics[width=\textwidth]{fromeffectloop2}
-    \caption{TODO}
+    \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,38 +1,38 @@
 
 \begin{figure}[H]
-  \begin{lstlisting}[style=JavaScript]
+  \begin{lstlisting}[language=JavaScript]
-  export abstract class IChildService {
+export abstract class IChildService {
-    // ...
+  // ...
-  }
+}
-
-  @Injectable(IChildService)
-  export class ChildService implements IChildService {
-    // ...
-  }
 
-  @Injectable()
+@Injectable(IChildService)
-  export class ParentService {
+export class ChildService implements IChildService {
-    private childService: IChildService;
+  // ...
+}
 
-    constructor(
+@Injectable()
-      childService: IChildService
+export class ParentService {
-    ) {
+  private childService: IChildService;
-      this.childService = IChildService;
-    }
 
-    // ...
+  constructor(
+    childService: IChildService
+  ) {
+    this.childService = IChildService;
   }
 
-  @Module({
+  // ...
-    providers: [
+}
-      ChildService,
+
-      ParentService
+@Module({
-    ],
+  providers: [
-    exports: [
+    ChildService,
-      ParentService
+    ParentService
-    ]
+  ],
-  })
+  exports: [
-  export class ParentModule {}
+    ParentService
+  ]
+})
+export class ParentModule {}
   \end{lstlisting}
 
   \centering

figures/nestjs2.tex

@@ -1,25 +1,25 @@
 \begin{figure}[H]
-  \begin{lstlisting}[style=JavaScript]
+  \begin{lstlisting}[language=JavaScript]
-  @Injectable()
+@Injectable()
-  export class MyService {
+export class MyService {
-    constructor(
+  constructor(
-      parentService: ParentService
+    parentService: ParentService
-    ) {
+  ) {
-      // ...
+    // ...
-    }
   }
+}
 
-  @Module({
+@Module({
-    imports: [
+  imports: [
-      // Comme ParentModule exporte ParentService,
+    // Comme ParentModule exporte ParentService,
-      // ce service est facilement rendu disponible ici pour MyService:
+    // ce service est facilement rendu disponible ici pour MyService:
-      ParentModule
+    ParentModule
-    ],
+  ],
-    providers: [
+  providers: [
-      MyService
+    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,31 +80,38 @@
 }
 
 \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}{
+\lstset{
-    backgroundcolor=\color{bgColor},
+  % backgroundcolor=\color{bgColor},
-    commentstyle=\color{gray},
+  commentstyle=\color{gray},
-    keywordstyle=\color{magenta},
+  keywordstyle=\color{magenta},
-    numberstyle=\tiny\color{gray},
+  numberstyle=\tiny\color{gray},
-    stringstyle=\color{purple},
+  stringstyle=\color{purple},
-    basicstyle=\footnotesize,
+  basicstyle=\footnotesize,
-    breakatwhitespace=false,
+  breakatwhitespace=false,
-    breaklines=true,
+  breaklines=true,
-    captionpos=b,
+  captionpos=b,
-    keepspaces=true,
+  keepspaces=true,
-    numbers=left,
+  numbers=left,
-    numbersep=5pt,
+  numbersep=5pt,
-    showspaces=false,
+  showspaces=false,
-    showstringspaces=false,
+  showstringspaces=false,
-    showtabs=false,
+  showtabs=false,
-    tabsize=2,
+  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/}}