From ecaf1db97770f770fc0dcfa14f32282c41196e8d Mon Sep 17 00:00:00 2001
From: Joseph Gilley <joe.gilley@gmail.com>
Date: Fri, 22 Mar 2024 07:03:38 -0700
Subject: [PATCH] Improve codeblock formatting in documentation (#629)

* Improve codeblock formatting in documentation

Improves codeblock highlighting by:

 -  Adding context to the codeblock detailing which language the
    following code is.
 -  Setting the `pre` block's background to match the default
    background for `code` blocks to give a consistent experience.
 -  Setting a border radius for the `pre` block double that of the
    `code` block's default (4px, which is hard-coded).
---
 media/docs.css | 39 +++++++++++++++++++++++++++++++--------
 1 file changed, 31 insertions(+), 8 deletions(-)

diff --git a/media/docs.css b/media/docs.css
index e986855..c73718b 100644
--- a/media/docs.css
+++ b/media/docs.css
@@ -1,11 +1,3 @@
-.codeblock {
-	padding: 0.5em;
-	margin: .5em 0;
-	overflow: auto;
-	border-radius: 0.3em;
-	!background-color: #fdf6e3;
-}
-
 body {
 	margin-right: 200px;
 }
@@ -22,3 +14,34 @@ a {
 	height: 100%;
 	z-index: 100;
 }
+
+pre:has(code) {
+	position: relative;
+	background-color: var(--vscode-textPreformat-background);
+	padding: 2.5em 1.5em 1em 1.5em;
+	border-radius: 8px;
+	overflow-x: auto;
+}
+
+pre code {
+	background-color: transparent !important;
+	padding-left: 0px;
+	padding-right: 0px;
+}
+
+pre:has(code[class*="language-"])::before {
+	position: absolute;
+	top: 0;
+	left: 0;
+	padding: 0.5em 1em;
+	color: var(--vscode-titlebar-activeForeground);
+	font-family: var(--vscode-font-family);
+}
+
+pre:has(code.language-gdscript)::before {
+	content: "GDScript";
+}
+
+pre:has(code.language-csharp)::before {
+	content: "C#";
+}