From 124b0b86836696a03cc5d11a902c80e8faa9082f Mon Sep 17 00:00:00 2001
From: Daniel Cheng <dcheng@chromium.org>
Date: Thu, 1 May 2025 12:23:23 -0700
Subject: [PATCH] Add styling rules for good code examples in shared stylesheet

This change primarily affects the C++ style guide: while a number of
other style guides also use <pre> directly for code examples, the other
style guides all use JS to prettyprint the code blocks, and the
prettyprinter overrides the styles specified in the shared stylesheet.

The exception is the AngularJS style guide, but it is already
inconsistently formatted and this change does not make it any worse.

There are also several other style guides other than C++ where
good/neutral are rendered identically; this commit does not attempt to
address those either.
---
 include/styleguide.css | 25 +++++++++++++++----------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/include/styleguide.css b/include/styleguide.css
index ef62024..b78b8f9 100644
--- a/include/styleguide.css
+++ b/include/styleguide.css
@@ -59,10 +59,13 @@ code, samp, var {
 }
 
 pre {
-  padding:6px 10px;
-  background-color:#FAFAFA;
-  border:1px solid #bbb;
-  overflow:auto;
+  background-color: #e9e9e9;
+  color: #333;
+  border-color: #f9f9f9;
+  border-style: solid;
+  border-width: 1px 1px 1px 5px;
+  overflow: auto;
+  padding: 6px 12px;
 }
 
 pre.prettyprint {
@@ -70,14 +73,16 @@ pre.prettyprint {
   border:1px solid #bbb !important;
 }
 
-code.bad, code.badcode {
-  color: magenta;
+pre.bad, pre.badcode {
+  background-color: #ffe6d8;
+  border-color: #fff0f0;
+  color: #c00;
 }
 
-pre.bad, pre.badcode {
-  background-color:#ffe6d8;
-  border-top:1px inset #a03;
-  border-left:1px inset #a03;
+pre.good, pre.goodcode {
+  background-color: #e8fff6;
+  color: #060;
+  border-color: #f0fff0;
 }
 
 hr {