Fix display issues with project creation config page (readthedocs#10398)

This addresses some display bugs from commercial, where the nested order
of elements was swapped and there are already conflicts between usage of
`<code>` and `<pre>`.

Instead, this reverts to my suggestion from review, and uses the Pygments
wrapping element `div.highlight` to style code block content. This avoids
conflicts between code/pre use and styling and provides a better looking
border and padding for block content.

This also survives the translation to the commercial styling better and
doesn't affect any other case in the UI where `<code>` is used to style
inline content instead of block content.

There is a required PR on commercial too.

media/css/core.css

@@ -1309,7 +1309,8 @@ div.httpexchange dl dd:after {
     content: '';
 }
 
-div.httpexchange div.highlight pre {
+div.httpexchange div.highlight pre,
+div.highlight > pre {
     padding: 1em;
     background: #f4f4f4;
     border: 1px solid #ccc;
@@ -1397,7 +1398,3 @@ div.highlight pre .vc { color: #bb60d5 } /* Name.Variable.Class */
 div.highlight pre .vg { color: #bb60d5 } /* Name.Variable.Global */
 div.highlight pre .vi { color: #bb60d5 } /* Name.Variable.Instance */
 div.highlight pre .il { color: #40a070 } /* Literal.Number.Integer.Long */
-
-pre.small {
-    font-size: 0.85em;
-}

readthedocs/templates/projects/import_config.html

@@ -2,19 +2,25 @@
 {% load i18n %}
 
 {% block content %}
-<h3>{% trans "Project configuration file (<code>.readthedocs.yaml</code>)" %}</h3>
+  <h3>{% trans "Add a project configuration file" %}</h3>
 
-<p class="info">
+  <p class="info">
     {% blocktrans trimmed %}
-    Make sure your project has a <code>.readthedocs.yaml</code> at the root of your repository. This file is required by Read the Docs to be able to build your documentation. You can <a href="https://docs.readthedocs.io/en/stable/config-file/v2.html">read more about this in our documentation</a>.
+      Make sure your project has a <code>.readthedocs.yaml</code> configuration file at the root directory of your repository.
+      This file is required by Read the Docs to build your documentation.
+      You can <a href="https://docs.readthedocs.io/en/stable/config-file/v2.html">read more about our configuration file in our documentation</a>.
     {% endblocktrans %}
-</p>
+  </p>
 
-<p class="info">
-    Here you have an example for a common Sphinx project:
+  <p>
+    {% blocktrans trimmed %}
+      Here is an example configuration file for a project using Sphinx:
+    {% endblocktrans %}
+  </p>
 
-    <pre class="small">
-        <code># .readthedocs.yaml
+  <div class="highlight">
+    <pre>
+# .readthedocs.yaml
 # Read the Docs configuration file
 # See https://docs.readthedocs.io/en/stable/config-file/v2.html for details
 
@@ -40,14 +46,13 @@ <h3>{% trans "Project configuration file (<code>.readthedocs.yaml</code>)" %}</h
 #    - pdf
 #    - epub
 
-# Optionally but recommended, declare the Python requirements required
+# Optional but recommended, declare the Python requirements required
 # to build your documentation
 # See https://docs.readthedocs.io/en/stable/guides/reproducible-builds.html
 # python:
 #    install:
-#    - requirements: docs/requirements.txt</code>
-    </pre>
-</p>
+#    - requirements: docs/requirements.txt</pre>
+  </div>
 
-{{ block.super }}
+  {{ block.super }}
 {% endblock %}