diff --git a/docs/product/components/code-blocks.html b/docs/product/components/code-blocks.html
index 31c2b36d06..543af66761 100644
--- a/docs/product/components/code-blocks.html
+++ b/docs/product/components/code-blocks.html
@@ -350,6 +350,54 @@
+ {% header "h3", "LaTeX" %}
+
+{% highlight html %}
+
+ …
+
+{% endhighlight %}
+
+{% highlight latex %}
+% !TeX encoding = utf8
+\documentclass{article}
+
+\usepackage[T1]{fontenc}
+\usepackage{lmodern}
+\usepackage{amsfonts}
+\usepackage{xparse}
+\usepackage{mathtools}
+
+\newcommand\hi[1]{Hello #1!}
+
+\ExplSyntaxOn
+ % Convert a roman number into an arabic one
+ \NewDocumentCommand \romantonum { m }
+ { \int_from_roman:n { #1 } }
+\ExplSyntaxOff
+
+\begin{document}
+
+\section{Highlight.js}
+\hi{you}
+This is \LaTeX\ syntax highlighted by \verb|highlight.js|.
+You should look at section~\ref{sec:fermat} next.
+
+Did you know that MDCLXI is \romantonum{MDCLXI}? % It's 1661.
+
+\subsection{Fermat}\label{sec:fermat}
+I have a wonderful proof that
+\[
+ a^n + b^n \neq c^n
+\]
+for \(a, b, c, d, n \in \mathbb{Z}_+\) with \(n > 2\).
+Sadly, it is too large to fit in this code snippet.
+
+\end{document}
+{% endhighlight %}
+
+
+
{% header "h3", "SQL" %}
{% highlight html %}
diff --git a/lib/css/components/_stacks-code-blocks.less b/lib/css/components/_stacks-code-blocks.less
index a4d4a50d36..2e5b8a060f 100644
--- a/lib/css/components/_stacks-code-blocks.less
+++ b/lib/css/components/_stacks-code-blocks.less
@@ -98,6 +98,11 @@ code[class*="language-"] {
.hljs-strong {
font-weight: bold;
}
+
+ // TODO
+ .hljs-class, .hljs-operator, .hljs-tag, .hljs-function, .hljs-params, .hljs-formula, .hljs-punctuation {
+ color: inherit;
+ }
}
pre.s-code-block .s-code-block--line-numbers {
diff --git a/package-lock.json b/package-lock.json
index 52cedef105..45c48d574f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3575,9 +3575,9 @@
}
},
"highlight.js": {
- "version": "10.1.2",
- "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.1.2.tgz",
- "integrity": "sha512-Q39v/Mn5mfBlMff9r+zzA+gWxRsCRKwEMvYTiisLr/XUiFI/4puWt0Ojdko3R3JCNWGdOWaA5g/Yxqa23kC5AA==",
+ "version": "10.3.2",
+ "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.3.2.tgz",
+ "integrity": "sha512-3jRT7OUYsVsKvukNKZCtnvRcFyCJqSEIuIMsEybAXRiFSwpt65qjPd/Pr+UOdYt7WJlt+lj3+ypUsHiySBp/Jw==",
"dev": true
},
"homedir-polyfill": {
diff --git a/package.json b/package.json
index 4780950228..4cbc214ce0 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
"grunt-contrib-watch": "^1.1.0",
"grunt-shell": "^3.0.1",
"grunt-ts": "^6.0.0-beta.22",
+ "highlight.js": "^10.3.2",
"typescript": "^4.0.3"
},
"browserslist": [