From 69fc9ce6a379e3c28020b8e9b849b7c39948b848 Mon Sep 17 00:00:00 2001
From: Stan Lo <stan.lo@shopify.com>
Date: Thu, 12 Sep 2024 13:14:02 +0100
Subject: [PATCH] Add "Example" label to example code blocks

The label should help users distinguish example code blocks from other
code blocks, such as method source code.

It's only applied to Ruby code examples.
---
 .../generator/template/darkfish/css/rdoc.css   | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/lib/rdoc/generator/template/darkfish/css/rdoc.css b/lib/rdoc/generator/template/darkfish/css/rdoc.css
index c4f6aa88ab..20ba4e8415 100644
--- a/lib/rdoc/generator/template/darkfish/css/rdoc.css
+++ b/lib/rdoc/generator/template/darkfish/css/rdoc.css
@@ -597,6 +597,24 @@ main .method-source-code.active-menu {
   max-height: 100vh;
 }
 
+main pre.ruby::before {
+  content: "Example";
+  color: var(--secondary-color);
+  border-bottom: 1px solid var(--border-color);
+  display: block;
+  padding: 10px 0;
+  font-size: 0.9em;
+  margin-bottom: 10px;
+}
+
+main pre.ruby {
+  margin: 0;
+  padding: 0px 16px 16px 16px;
+  overflow-x: auto;
+  border-radius: 4px;
+  border-color: var(--border-color);
+}
+
 main .method-description .method-calls-super {
   color: var(--text-color);
   font-weight: bold;