diff --git a/_includes/head.html b/_includes/head.html
index 602e239..00d1d51 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -16,7 +16,47 @@
   {% endif %}
   <!-- Load up MathJax script if needed ... specify in /_data/options.yml file-->
   {% if site.data.options.mathjax %}
-    <script type="text/javascript" src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
+    <script>
+    window.MathJax = {
+      startup: {
+        pageReady: function () {
+          document.querySelectorAll('script[type^="math/tex"]').forEach(function (el) {
+            var display = el.type.indexOf('mode=display') >= 0;
+            var node = document.createElement(display ? 'div' : 'span');
+            node.textContent = display ? '\\[' + el.textContent + '\\]' : '\\(' + el.textContent + '\\)';
+            el.parentNode.replaceChild(node, el);
+          });
+          return MathJax.startup.defaultPageReady();
+        }
+      },
+      tex: {
+        inlineMath: [['$', '$'], ['\\(', '\\)']],
+        displayMath: [['$$', '$$'], ['\\[', '\\]']],
+        processEscapes: true,
+        macros: {
+          e: "\\epsilon",
+          xti: "x^{(i)}",
+          yti: "y^{(i)}",
+          bfy: "{\\bf y}",
+          bfx: "{\\bf x}",
+          bfg: "{\\bf g}",
+          bfbeta: "{\\bf \\beta}",
+          tp: "\\tilde p",
+          pt: "p_\\theta",
+          Exp: "{\\mathbb{E}}",
+          Ind: "{\\mathbb{I}}",
+          KL: "{\\mathbb{KL}}",
+          Dc: "{\\mathcal{D}}",
+          Tc: "{\\mathcal{T}}",
+          Xc: "{\\mathcal{X}}",
+          note: ["\\textcolor{blue}{[NOTE: #1]}", 1]
+        },
+        packages: {'[+]': ['color']}
+      },
+      loader: {load: ['[tex]/color']}
+    };
+    </script>
+    <script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
   {% endif %}
 
   <script>
diff --git a/_layouts/post.html b/_layouts/post.html
index 3379ba7..4627340 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -5,31 +5,5 @@ <h1>{{ page.title | capitalize }}</h1>
 <p class="subtitle">{{ page.date | date: "%B %-d, %Y" }}</p>
 
 
-<script type="text/x-mathjax-config">
-  MathJax.Hub.Config({
-    TeX: {
-      Macros: {
-        e: "\\epsilon",
-        xti: "x^{(i)}",
-        yti: "y^{(i)}",
-        bfy: "{\\bf y}",
-        bfx: "{\\bf x}",
-        bfg: "{\\bf g}",
-        bfbeta: "{\\bf \\beta}",
-        tp: "\\tilde p",
-        pt: "p_\\theta",
-        Exp: "{\\mathbb{E}}",
-        Ind: "{\\mathbb{I}}",
-        KL: "{\\mathbb{KL}}",
-        Dc: "{\\mathcal{D}}",
-        Tc: "{\\mathcal{T}}",
-        Xc: "{\\mathcal{X}}",
-        note: ["\\textcolor{blue}{[NOTE: #1]}",1]
-      }
-    }
-  });
-</script>
-
-
 {{ content }}
 
diff --git a/docs/autoregressive/index.html b/docs/autoregressive/index.html
index 80afa71..388743b 100644
--- a/docs/autoregressive/index.html
+++ b/docs/autoregressive/index.html
@@ -18,7 +18,47 @@
   
   <!-- Load up MathJax script if needed ... specify in /_data/options.yml file-->
   
-    <script type="text/javascript" src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
+    <script>
+    window.MathJax = {
+      startup: {
+        pageReady: function () {
+          document.querySelectorAll('script[type^="math/tex"]').forEach(function (el) {
+            var display = el.type.indexOf('mode=display') >= 0;
+            var node = document.createElement(display ? 'div' : 'span');
+            node.textContent = display ? '\\[' + el.textContent + '\\]' : '\\(' + el.textContent + '\\)';
+            el.parentNode.replaceChild(node, el);
+          });
+          return MathJax.startup.defaultPageReady();
+        }
+      },
+      tex: {
+        inlineMath: [['$', '$'], ['\\(', '\\)']],
+        displayMath: [['$$', '$$'], ['\\[', '\\]']],
+        processEscapes: true,
+        macros: {
+          e: "\\epsilon",
+          xti: "x^{(i)}",
+          yti: "y^{(i)}",
+          bfy: "{\\bf y}",
+          bfx: "{\\bf x}",
+          bfg: "{\\bf g}",
+          bfbeta: "{\\bf \\beta}",
+          tp: "\\tilde p",
+          pt: "p_\\theta",
+          Exp: "{\\mathbb{E}}",
+          Ind: "{\\mathbb{I}}",
+          KL: "{\\mathbb{KL}}",
+          Dc: "{\\mathcal{D}}",
+          Tc: "{\\mathcal{T}}",
+          Xc: "{\\mathcal{X}}",
+          note: ["\\textcolor{blue}{[NOTE: #1]}", 1]
+        },
+        packages: {'[+]': ['color']}
+      },
+      loader: {load: ['[tex]/color']}
+    };
+    </script>
+    <script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
   
 
   <script>
@@ -51,32 +91,6 @@ <h1>Autoregressive models</h1>
 <p class="subtitle"></p>
 
 
-<script type="text/x-mathjax-config">
-  MathJax.Hub.Config({
-    TeX: {
-      Macros: {
-        e: "\\epsilon",
-        xti: "x^{(i)}",
-        yti: "y^{(i)}",
-        bfy: "{\\bf y}",
-        bfx: "{\\bf x}",
-        bfg: "{\\bf g}",
-        bfbeta: "{\\bf \\beta}",
-        tp: "\\tilde p",
-        pt: "p_\\theta",
-        Exp: "{\\mathbb{E}}",
-        Ind: "{\\mathbb{I}}",
-        KL: "{\\mathbb{KL}}",
-        Dc: "{\\mathcal{D}}",
-        Tc: "{\\mathcal{T}}",
-        Xc: "{\\mathcal{X}}",
-        note: ["\\textcolor{blue}{[NOTE: #1]}",1]
-      }
-    }
-  });
-</script>
-
-
 <p>We begin our study into generative modeling with autoregressive models. As before, we assume we are given access to a dataset <script type="math/tex">\mathcal{D}</script> of <script type="math/tex">n</script>-dimensional datapoints <script type="math/tex">\mathbf{x}</script>. For simplicity, we assume the datapoints are binary, i.e., <script type="math/tex">\mathbf{x} \in \{0,1\}^n</script>.</p>
 
 <h1 id="representation">Representation</h1>
diff --git a/docs/flow/index.html b/docs/flow/index.html
index d01ba1f..28cfe33 100644
--- a/docs/flow/index.html
+++ b/docs/flow/index.html
@@ -18,7 +18,47 @@
   
   <!-- Load up MathJax script if needed ... specify in /_data/options.yml file-->
   
-    <script type="text/javascript" src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
+    <script>
+    window.MathJax = {
+      startup: {
+        pageReady: function () {
+          document.querySelectorAll('script[type^="math/tex"]').forEach(function (el) {
+            var display = el.type.indexOf('mode=display') >= 0;
+            var node = document.createElement(display ? 'div' : 'span');
+            node.textContent = display ? '\\[' + el.textContent + '\\]' : '\\(' + el.textContent + '\\)';
+            el.parentNode.replaceChild(node, el);
+          });
+          return MathJax.startup.defaultPageReady();
+        }
+      },
+      tex: {
+        inlineMath: [['$', '$'], ['\\(', '\\)']],
+        displayMath: [['$$', '$$'], ['\\[', '\\]']],
+        processEscapes: true,
+        macros: {
+          e: "\\epsilon",
+          xti: "x^{(i)}",
+          yti: "y^{(i)}",
+          bfy: "{\\bf y}",
+          bfx: "{\\bf x}",
+          bfg: "{\\bf g}",
+          bfbeta: "{\\bf \\beta}",
+          tp: "\\tilde p",
+          pt: "p_\\theta",
+          Exp: "{\\mathbb{E}}",
+          Ind: "{\\mathbb{I}}",
+          KL: "{\\mathbb{KL}}",
+          Dc: "{\\mathcal{D}}",
+          Tc: "{\\mathcal{T}}",
+          Xc: "{\\mathcal{X}}",
+          note: ["\\textcolor{blue}{[NOTE: #1]}", 1]
+        },
+        packages: {'[+]': ['color']}
+      },
+      loader: {load: ['[tex]/color']}
+    };
+    </script>
+    <script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
   
 
   <script>
@@ -51,32 +91,6 @@ <h1>Normalizing flow models</h1>
 <p class="subtitle"></p>
 
 
-<script type="text/x-mathjax-config">
-  MathJax.Hub.Config({
-    TeX: {
-      Macros: {
-        e: "\\epsilon",
-        xti: "x^{(i)}",
-        yti: "y^{(i)}",
-        bfy: "{\\bf y}",
-        bfx: "{\\bf x}",
-        bfg: "{\\bf g}",
-        bfbeta: "{\\bf \\beta}",
-        tp: "\\tilde p",
-        pt: "p_\\theta",
-        Exp: "{\\mathbb{E}}",
-        Ind: "{\\mathbb{I}}",
-        KL: "{\\mathbb{KL}}",
-        Dc: "{\\mathcal{D}}",
-        Tc: "{\\mathcal{T}}",
-        Xc: "{\\mathcal{X}}",
-        note: ["\\textcolor{blue}{[NOTE: #1]}",1]
-      }
-    }
-  });
-</script>
-
-
 <p>We continue our study over another type of likelihood based generative models. As before, we assume we are given access to a dataset <script type="math/tex">\mathcal{D}</script> of <script type="math/tex">n</script>-dimensional datapoints <script type="math/tex">\mathbf{x}</script>. So far we have learned two types of likelihood based generative models:</p>
 
 <ol>
diff --git a/docs/gan/index.html b/docs/gan/index.html
index 6b95745..1dee4a7 100644
--- a/docs/gan/index.html
+++ b/docs/gan/index.html
@@ -18,7 +18,47 @@
   
   <!-- Load up MathJax script if needed ... specify in /_data/options.yml file-->
   
-    <script type="text/javascript" src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
+    <script>
+    window.MathJax = {
+      startup: {
+        pageReady: function () {
+          document.querySelectorAll('script[type^="math/tex"]').forEach(function (el) {
+            var display = el.type.indexOf('mode=display') >= 0;
+            var node = document.createElement(display ? 'div' : 'span');
+            node.textContent = display ? '\\[' + el.textContent + '\\]' : '\\(' + el.textContent + '\\)';
+            el.parentNode.replaceChild(node, el);
+          });
+          return MathJax.startup.defaultPageReady();
+        }
+      },
+      tex: {
+        inlineMath: [['$', '$'], ['\\(', '\\)']],
+        displayMath: [['$$', '$$'], ['\\[', '\\]']],
+        processEscapes: true,
+        macros: {
+          e: "\\epsilon",
+          xti: "x^{(i)}",
+          yti: "y^{(i)}",
+          bfy: "{\\bf y}",
+          bfx: "{\\bf x}",
+          bfg: "{\\bf g}",
+          bfbeta: "{\\bf \\beta}",
+          tp: "\\tilde p",
+          pt: "p_\\theta",
+          Exp: "{\\mathbb{E}}",
+          Ind: "{\\mathbb{I}}",
+          KL: "{\\mathbb{KL}}",
+          Dc: "{\\mathcal{D}}",
+          Tc: "{\\mathcal{T}}",
+          Xc: "{\\mathcal{X}}",
+          note: ["\\textcolor{blue}{[NOTE: #1]}", 1]
+        },
+        packages: {'[+]': ['color']}
+      },
+      loader: {load: ['[tex]/color']}
+    };
+    </script>
+    <script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
   
 
   <script>
@@ -51,32 +91,6 @@ <h1>Generative adversarial networks</h1>
 <p class="subtitle"></p>
 
 
-<script type="text/x-mathjax-config">
-  MathJax.Hub.Config({
-    TeX: {
-      Macros: {
-        e: "\\epsilon",
-        xti: "x^{(i)}",
-        yti: "y^{(i)}",
-        bfy: "{\\bf y}",
-        bfx: "{\\bf x}",
-        bfg: "{\\bf g}",
-        bfbeta: "{\\bf \\beta}",
-        tp: "\\tilde p",
-        pt: "p_\\theta",
-        Exp: "{\\mathbb{E}}",
-        Ind: "{\\mathbb{I}}",
-        KL: "{\\mathbb{KL}}",
-        Dc: "{\\mathcal{D}}",
-        Tc: "{\\mathcal{T}}",
-        Xc: "{\\mathcal{X}}",
-        note: ["\\textcolor{blue}{[NOTE: #1]}",1]
-      }
-    }
-  });
-</script>
-
-
 <p>We now move onto another family of generative models called generative adversarial networks (GANs). GANs are unique from all the other model families that we have seen so far, such as autoregressive models, VAEs, and normalizing flow models, because we do not train them using maximum likelihood.</p>
 
 <h1 id="likelihood-free-learning">Likelihood-free learning</h1>
diff --git a/docs/index.html b/docs/index.html
index 3c1c7c5..236e4b1 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -18,7 +18,47 @@
   
   <!-- Load up MathJax script if needed ... specify in /_data/options.yml file-->
   
-    <script type="text/javascript" src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
+    <script>
+    window.MathJax = {
+      startup: {
+        pageReady: function () {
+          document.querySelectorAll('script[type^="math/tex"]').forEach(function (el) {
+            var display = el.type.indexOf('mode=display') >= 0;
+            var node = document.createElement(display ? 'div' : 'span');
+            node.textContent = display ? '\\[' + el.textContent + '\\]' : '\\(' + el.textContent + '\\)';
+            el.parentNode.replaceChild(node, el);
+          });
+          return MathJax.startup.defaultPageReady();
+        }
+      },
+      tex: {
+        inlineMath: [['$', '$'], ['\\(', '\\)']],
+        displayMath: [['$$', '$$'], ['\\[', '\\]']],
+        processEscapes: true,
+        macros: {
+          e: "\\epsilon",
+          xti: "x^{(i)}",
+          yti: "y^{(i)}",
+          bfy: "{\\bf y}",
+          bfx: "{\\bf x}",
+          bfg: "{\\bf g}",
+          bfbeta: "{\\bf \\beta}",
+          tp: "\\tilde p",
+          pt: "p_\\theta",
+          Exp: "{\\mathbb{E}}",
+          Ind: "{\\mathbb{I}}",
+          KL: "{\\mathbb{KL}}",
+          Dc: "{\\mathcal{D}}",
+          Tc: "{\\mathcal{T}}",
+          Xc: "{\\mathcal{X}}",
+          note: ["\\textcolor{blue}{[NOTE: #1]}", 1]
+        },
+        packages: {'[+]': ['color']}
+      },
+      loader: {load: ['[tex]/color']}
+    };
+    </script>
+    <script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
   
 
   <script>
@@ -51,32 +91,6 @@ <h1>Contents</h1>
 <p class="subtitle"></p>
 
 
-<script type="text/x-mathjax-config">
-  MathJax.Hub.Config({
-    TeX: {
-      Macros: {
-        e: "\\epsilon",
-        xti: "x^{(i)}",
-        yti: "y^{(i)}",
-        bfy: "{\\bf y}",
-        bfx: "{\\bf x}",
-        bfg: "{\\bf g}",
-        bfbeta: "{\\bf \\beta}",
-        tp: "\\tilde p",
-        pt: "p_\\theta",
-        Exp: "{\\mathbb{E}}",
-        Ind: "{\\mathbb{I}}",
-        KL: "{\\mathbb{KL}}",
-        Dc: "{\\mathcal{D}}",
-        Tc: "{\\mathcal{T}}",
-        Xc: "{\\mathcal{X}}",
-        note: ["\\textcolor{blue}{[NOTE: #1]}",1]
-      }
-    }
-  });
-</script>
-
-
 <p>These notes form a concise introductory course on deep generative models.
 They are based on Stanford <a href="https://deepgenerativemodels.github.io/">CS236</a>, taught by <a href="http://cs.stanford.edu/~ermon/">Stefano Ermon</a> and <a href="http://aditya-grover.github.io/">Aditya Grover</a>, and have been written by <a href="http://aditya-grover.github.io/">Aditya Grover</a>, with the <a href="https://github.com/deepgenerativemodels/notes/commits/master">help</a> of many students and course staff.
 <label for="mn-id-whatever" class="margin-toggle"> ⊕</label><input type="checkbox" id="mn-id-whatever" class="margin-toggle" /><span class="marginnote">The notes are still <strong>under construction</strong>!
diff --git a/docs/introduction/index.html b/docs/introduction/index.html
index f0f5990..c9b062f 100644
--- a/docs/introduction/index.html
+++ b/docs/introduction/index.html
@@ -18,7 +18,47 @@
   
   <!-- Load up MathJax script if needed ... specify in /_data/options.yml file-->
   
-    <script type="text/javascript" src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
+    <script>
+    window.MathJax = {
+      startup: {
+        pageReady: function () {
+          document.querySelectorAll('script[type^="math/tex"]').forEach(function (el) {
+            var display = el.type.indexOf('mode=display') >= 0;
+            var node = document.createElement(display ? 'div' : 'span');
+            node.textContent = display ? '\\[' + el.textContent + '\\]' : '\\(' + el.textContent + '\\)';
+            el.parentNode.replaceChild(node, el);
+          });
+          return MathJax.startup.defaultPageReady();
+        }
+      },
+      tex: {
+        inlineMath: [['$', '$'], ['\\(', '\\)']],
+        displayMath: [['$$', '$$'], ['\\[', '\\]']],
+        processEscapes: true,
+        macros: {
+          e: "\\epsilon",
+          xti: "x^{(i)}",
+          yti: "y^{(i)}",
+          bfy: "{\\bf y}",
+          bfx: "{\\bf x}",
+          bfg: "{\\bf g}",
+          bfbeta: "{\\bf \\beta}",
+          tp: "\\tilde p",
+          pt: "p_\\theta",
+          Exp: "{\\mathbb{E}}",
+          Ind: "{\\mathbb{I}}",
+          KL: "{\\mathbb{KL}}",
+          Dc: "{\\mathcal{D}}",
+          Tc: "{\\mathcal{T}}",
+          Xc: "{\\mathcal{X}}",
+          note: ["\\textcolor{blue}{[NOTE: #1]}", 1]
+        },
+        packages: {'[+]': ['color']}
+      },
+      loader: {load: ['[tex]/color']}
+    };
+    </script>
+    <script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
   
 
   <script>
@@ -51,32 +91,6 @@ <h1>Introduction</h1>
 <p class="subtitle"></p>
 
 
-<script type="text/x-mathjax-config">
-  MathJax.Hub.Config({
-    TeX: {
-      Macros: {
-        e: "\\epsilon",
-        xti: "x^{(i)}",
-        yti: "y^{(i)}",
-        bfy: "{\\bf y}",
-        bfx: "{\\bf x}",
-        bfg: "{\\bf g}",
-        bfbeta: "{\\bf \\beta}",
-        tp: "\\tilde p",
-        pt: "p_\\theta",
-        Exp: "{\\mathbb{E}}",
-        Ind: "{\\mathbb{I}}",
-        KL: "{\\mathbb{KL}}",
-        Dc: "{\\mathcal{D}}",
-        Tc: "{\\mathcal{T}}",
-        Xc: "{\\mathcal{X}}",
-        note: ["\\textcolor{blue}{[NOTE: #1]}",1]
-      }
-    }
-  });
-</script>
-
-
 <p>Intelligent agents are constantly generating, acquiring, and processing
 data. This data could be in the form of <em>images</em> that we capture on our
 phones, <em>text</em> messages we share with our friends, <em>graphs</em> that model
diff --git a/docs/vae/index.html b/docs/vae/index.html
index c9d2f14..8a3615d 100644
--- a/docs/vae/index.html
+++ b/docs/vae/index.html
@@ -18,7 +18,47 @@
   
   <!-- Load up MathJax script if needed ... specify in /_data/options.yml file-->
   
-    <script type="text/javascript" src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
+    <script>
+    window.MathJax = {
+      startup: {
+        pageReady: function () {
+          document.querySelectorAll('script[type^="math/tex"]').forEach(function (el) {
+            var display = el.type.indexOf('mode=display') >= 0;
+            var node = document.createElement(display ? 'div' : 'span');
+            node.textContent = display ? '\\[' + el.textContent + '\\]' : '\\(' + el.textContent + '\\)';
+            el.parentNode.replaceChild(node, el);
+          });
+          return MathJax.startup.defaultPageReady();
+        }
+      },
+      tex: {
+        inlineMath: [['$', '$'], ['\\(', '\\)']],
+        displayMath: [['$$', '$$'], ['\\[', '\\]']],
+        processEscapes: true,
+        macros: {
+          e: "\\epsilon",
+          xti: "x^{(i)}",
+          yti: "y^{(i)}",
+          bfy: "{\\bf y}",
+          bfx: "{\\bf x}",
+          bfg: "{\\bf g}",
+          bfbeta: "{\\bf \\beta}",
+          tp: "\\tilde p",
+          pt: "p_\\theta",
+          Exp: "{\\mathbb{E}}",
+          Ind: "{\\mathbb{I}}",
+          KL: "{\\mathbb{KL}}",
+          Dc: "{\\mathcal{D}}",
+          Tc: "{\\mathcal{T}}",
+          Xc: "{\\mathcal{X}}",
+          note: ["\\textcolor{blue}{[NOTE: #1]}", 1]
+        },
+        packages: {'[+]': ['color']}
+      },
+      loader: {load: ['[tex]/color']}
+    };
+    </script>
+    <script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
   
 
   <script>
@@ -51,32 +91,6 @@ <h1>Variational autoencoders</h1>
 <p class="subtitle"></p>
 
 
-<script type="text/x-mathjax-config">
-  MathJax.Hub.Config({
-    TeX: {
-      Macros: {
-        e: "\\epsilon",
-        xti: "x^{(i)}",
-        yti: "y^{(i)}",
-        bfy: "{\\bf y}",
-        bfx: "{\\bf x}",
-        bfg: "{\\bf g}",
-        bfbeta: "{\\bf \\beta}",
-        tp: "\\tilde p",
-        pt: "p_\\theta",
-        Exp: "{\\mathbb{E}}",
-        Ind: "{\\mathbb{I}}",
-        KL: "{\\mathbb{KL}}",
-        Dc: "{\\mathcal{D}}",
-        Tc: "{\\mathcal{T}}",
-        Xc: "{\\mathcal{X}}",
-        note: ["\\textcolor{blue}{[NOTE: #1]}",1]
-      }
-    }
-  });
-</script>
-
-
 <div class="mathblock"><script type="math/tex; mode=display">
 \newcommand{\D}{\mathcal{D}}
 \newcommand{\KL}[2]{D_\mathrm{KL}\paren{#1 \mathbin{\|} #2}}