diff --git a/docs/snippets/syntax_block_end.md b/docs/snippets/syntax_block_end.md
new file mode 100644
index 000000000..a100faef8
--- /dev/null
+++ b/docs/snippets/syntax_block_end.md
@@ -0,0 +1,2 @@
+</pre></div>
+<!-- Include this snippet when ending a code block that shows the syntax of a CSS rule. -->
diff --git a/docs/snippets/syntax_block_start.md b/docs/snippets/syntax_block_start.md
new file mode 100644
index 000000000..3eddc9775
--- /dev/null
+++ b/docs/snippets/syntax_block_start.md
@@ -0,0 +1,2 @@
+<!-- Include this snippet when starting a code block that shows the syntax of a CSS rule. -->
+<div class="highlight" style="padding: 0.25em 1.15em; background: var(--md-code-bg-color);"><pre>