lighter background-color of <pre> and <code>

1 files changed, 22 insertions, 2 deletions

diff --git a/css/common/misc.css b/css/common/misc.css
index 33dba8f..374f40a 100644
--- a/css/common/misc.css
+++ b/css/common/misc.css
@@ -1,10 +1,11 @@
+/* Utility classes to prevent blocks from expanding unreasonably. }
 .wide-enough {
   max-width: 400px;
 }
 .wider {
   max-width: 600px;
 }
-/* "Header link" becomes blue inside of <hN><a>Header link</a></hN> otherwise. */
+/* Links become blue inside of <hN> elements otherwise. */
 h1 a,
 h2 a,
 h3 a,
@@ -13,10 +14,11 @@ h5 a,
 h6 a {
   color: inherit;
 }
-/* Link captions become too close to badges on the sidebar. */
+/* Link captions might become too close to badges on the sidebar. */
 span.badge {
   margin-left: .5em;
 }
+/* Add horizontal scrollbars to <pre>s and don't wrap the code inside. */
 pre {
   overflow-x: auto;
 }
@@ -24,3 +26,21 @@ pre code {
   white-space: pre;
   word-wrap: normal;
 }
+/* Lighter background for <pre> and <code> elements. */
+pre {
+  font-size: inherit;
+  background-color: #fbfbfb;
+}
+.highlight {
+  background-color: #fbfbfb !important;
+}
+code {
+  color: inherit;
+  background-color: #fbfbfb;
+  font-size: inherit;
+}
+/* Prevent <code> elements from standing out from alerts. */
+.alert code {
+  padding: 0;
+  background-color: inherit;
+}