diff --git a/src/includes/docs-head.html b/src/includes/docs-head.html
index c746d68..c7525cc 100644
--- a/src/includes/docs-head.html
+++ b/src/includes/docs-head.html
@@ -1,5 +1,10 @@
 {{include "/includes/head.html"}}
 <link rel="stylesheet" href="/resources/css/docs.css">
 <link rel="stylesheet" href="/resources/css/chroma.css">
+{{$directives := list }}
+{{range $i, $file := (listFiles "/docs/markdown/caddyfile/directives")}}
+    {{$directives = append $directives ($file | trimSuffix ".md")}}
+{{end}}
+<script type="text/javascript">window.CaddyfileDirectives = {{$directives | toJson}};</script>
 <script src="/resources/js/jquery-3.4.1.min.js"></script>
 <script src="/resources/js/docs.js"></script>
\ No newline at end of file
diff --git a/src/resources/js/docs.js b/src/resources/js/docs.js
index de45b71..c99643d 100644
--- a/src/resources/js/docs.js
+++ b/src/resources/js/docs.js
@@ -30,4 +30,20 @@ $(function() {
 	// to the outer pre element, and our CSS file has a style to
 	// ensure the inner code block does not produce extra padding
 	$('article > pre:not(.chroma) > code:not(.cmd)').parent().addClass('chroma');
+
+	// Add links to Caddyfile directives in code blocks.
+	// See include/docs-head.html for the whitelist bootstrapping logic
+	$('pre.chroma .k')
+		.filter(function (k, item) {
+			return window.CaddyfileDirectives.includes(item.innerText);
+		})
+		.map(function(k, item) {
+			$(item).html(
+				'<a href="/docs/caddyfile/directives/' + item.innerText + '"'
+					+ 'style="color: inherit;"'
+				+ '>'
+					+ item.innerText
+				+ '</a>'
+			);
+		});
 });
\ No newline at end of file