enable syntax highlighting in include directive (#2222)

Author: drammock

docs/docutils.conf

@@ -0,0 +1,5 @@
+# this file instructs docutils to use "short" classnames on lexed source code, so that
+# it's easier to write CSS that targets both docutils- and sphinx-generated code blocks.
+# see https://github.com/sphinx-doc/sphinx/issues/11185
+[restructuredtext parser]
+syntax-highlight: short

docs/user_guide/extending.rst

@@ -33,7 +33,7 @@ Then add the ``dropdown`` class to any admonition directive (shown here on a ``n
             :start-after: begin-example-dropdown
             :end-before: .. end-example-dropdown
             :code: rst
-            :class: highlight-rst
+            :class: highlight
 
     .. tab-item:: markdown
 
@@ -73,7 +73,7 @@ The title is specified on the same line as the ``.. admonition::`` directive:
             :start-after: begin-example-title
             :end-before: .. end-example-title
             :code: rst
-            :class: highlight-rst
+            :class: highlight
 
     .. tab-item:: markdown
 
@@ -108,7 +108,7 @@ Note that it updates both the color and the icon. See :doc:`./styling` for a lis
             :start-after: begin-example-semantic
             :end-before: .. end-example-semantic
             :code: rst
-            :class: highlight-rst
+            :class: highlight
 
     .. tab-item:: markdown
 
@@ -145,7 +145,7 @@ Be sure to use the same color for ``border-color`` and ``color`` and a different
             :start-after: begin-example-color
             :end-before: .. end-example-color
             :code: rst
-            :class: highlight-rst
+            :class: highlight
 
     .. tab-item:: markdown
 
@@ -163,7 +163,7 @@ And add the following to your ``custom.css`` file:
     :start-after: begin-custom-color
     :end-before: /* end-custom-color
     :code: css
-    :class: highlight-css
+    :class: highlight
 
 
 Using a custom icon
@@ -186,7 +186,7 @@ Customizing the icon uses a similar process to customizing the color: create a n
             :start-after: begin-example-icon
             :end-before: .. end-example-icon
             :code: rst
-            :class: highlight-rst
+            :class: highlight
 
     .. tab-item:: markdown
 
@@ -204,7 +204,7 @@ And add the following css to your ``custom.css`` file:
     :start-after: begin-custom-icon
     :end-before: /* end-custom-icon
     :code: css
-    :class: highlight-css
+    :class: highlight
 
 
 Combining all three customizations
@@ -227,7 +227,7 @@ Here we demonstrate an admonition with a custom icon, color, and title (and also
             :start-after: begin-example-youtube
             :end-before: .. end-example-youtube
             :code: rst
-            :class: highlight-rst
+            :class: highlight
 
     .. tab-item:: markdown
 
@@ -247,4 +247,4 @@ And add the following css to your custom.css file:
     :start-after: begin-custom-youtube
     :end-before: /* end-custom-youtube
     :code: css
-    :class: highlight-css
+    :class: highlight