From 52b30c8d3b094baad7e058ab3c7286b63cdc7ec3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rodrigo=20Gir=C3=A3o=20Serr=C3=A3o?=
 <5621605+rodrigogiraoserrao@users.noreply.github.com>
Date: Wed, 21 Dec 2022 17:32:23 +0000
Subject: [PATCH] Add snippets for syntax code blocks.

When defining the formal syntax of CSS rules we will use a syntax similar to that of the MDN docs and we want to be able to link directly from the syntax to the CSS types involved, so we cannot do that from within a markdown code block. Instead, we use explicit HTML that we include in two snippets so that it is easier to maintain.
---
 docs/snippets/syntax_block_end.md   | 2 ++
 docs/snippets/syntax_block_start.md | 2 ++
 2 files changed, 4 insertions(+)
 create mode 100644 docs/snippets/syntax_block_end.md
 create mode 100644 docs/snippets/syntax_block_start.md

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>