2 files changed, 82 insertions, 7 deletions
diff --git a/www/package-details-body.css b/www/package-details-body.css
index af443c0..a69a939 100644
--- a/www/package-details-body.css
+++ b/www/package-details-body.css
@@ -59,18 +59,56 @@ h1, h2
 }
 
 /*
- * Description.
+ * Description (plain text).
  *
  * This is a <pre> block that fits lines up to 80 characters long and
  * wraps longer ones.
  */
-#description
+#description.plain pre
 {
   font-size: 0.85em;
-  white-space: pre-wrap;
 }
 
 /*
+ * Description (Markdown).
+ *
+ * These are descendants of the <div> block containing the result of
+ * Markdown-to-HTML translation.
+ *
+ * Note that the Markdown code blocks are translated into the
+ * <pre><code>...<code/></pre> element construct.
+ */
+#description.markdown h1,
+#description.markdown h2
+{
+  white-space: normal;
+}
+
+/* code-box.css */
+#description.markdown :not(pre) > code
+{
+  background-color: rgba(0, 0, 0, 0.05);
+  border-radius: 0.2em;
+  padding: .2em .32em .18em .32em;
+}
+
+/* pre-box.css */
+#description.markdown pre
+{
+  background-color: rgba(0, 0, 0, 0.05);
+  border-radius: 0.2em;
+  padding: .8em .4em .8em .4em;
+  margin: 2em -.4em 2em -.4em; /* Use paddings of #content. */
+}
+
+#description.markdown pre > code
+{
+  font-size: inherit;
+}
+
+#description.markdown .error {color: #ff0000;}
+
+/*
  * Package details table.
  */
 #package
diff --git a/www/package-version-details-body.css b/www/package-version-details-body.css
index c2821f6..9e88432 100644
--- a/www/package-version-details-body.css
+++ b/www/package-version-details-body.css
@@ -73,18 +73,56 @@ h1, h2, h3
 }
 
 /*
- * Description.
+ * Description (plain text).
  *
  * This is a <pre> block that fits lines up to 80 characters long and
  * wraps longer ones.
  */
-#description
+#description.plain pre
 {
   font-size: 0.85em;
-  white-space: pre-wrap;
 }
 
 /*
+ * Description (Markdown).
+ *
+ * These are descendants of the <div> block containing the result of
+ * Markdown-to-HTML translation.
+ *
+ * Note that the Markdown code blocks are translated into the
+ * <pre><code>...<code/></pre> element construct.
+ */
+#description.markdown h1,
+#description.markdown h2
+{
+  white-space: normal;
+}
+
+/* code-box.css */
+#description.markdown :not(pre) > code
+{
+  background-color: rgba(0, 0, 0, 0.05);
+  border-radius: 0.2em;
+  padding: .2em .32em .18em .32em;
+}
+
+/* pre-box.css */
+#description.markdown pre
+{
+  background-color: rgba(0, 0, 0, 0.05);
+  border-radius: 0.2em;
+  padding: .8em .4em .8em .4em;
+  margin: 2em -.4em 2em -.4em; /* Use paddings of #content. */
+}
+
+#description.markdown pre > code
+{
+  font-size: inherit;
+}
+
+#description.markdown .error {color: #ff0000;}
+
+/*
  * Version details table.
  */
 #version
@@ -218,6 +256,5 @@ h1, h2, h3
 #changes
 {
   font-size: 0.85em;
-  white-space: pre-wrap;
   margin: .5em 0 .5em 0;
 }