From 0832a13987dd80a96ffaeadaa44a32dd8a51804c Mon Sep 17 00:00:00 2001
From: Marc Anton Dahmen <mail@marcdahmen.de>
Date: Mon, 31 Jul 2023 18:00:18 +0200
Subject: [PATCH] update example page

---
 demo/code.less  |  4 +++-
 demo/index.html | 12 ++++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/demo/code.less b/demo/code.less
index efdf495..5fc1901 100644
--- a/demo/code.less
+++ b/demo/code.less
@@ -24,7 +24,8 @@
 
 pre code.hljs {
 	display: block;
-	overflow-x: auto;
+	max-height: 40rem;
+	overflow: auto;
 	padding: 1em;
 }
 
@@ -91,6 +92,7 @@ code.hljs {
 		.hljs-selector-id,
 		.hljs-string,
 		.hljs-template-tag,
+		.hljs-attribute,
 		.hljs-type {
 			color: var(--code-accent-2);
 		}
diff --git a/demo/index.html b/demo/index.html
index a3ae9fd..3c4e6ae 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -229,8 +229,8 @@ <h2>No Theme</h2>
 				<p>
 					By default, the included styles only cover the most basic
 					functionality such as collapsing and indentation. You can
-					assign your CSS classes to the rendered elements as well as
-					fully customize the render function. Without any theming,
+					assign your own CSS classes to the rendered elements as well
+					as fully customize the render function. Without any theming,
 					the generated tree looks as follows. In addition to that,
 					the basic styles are controlled by
 					<a
@@ -242,6 +242,14 @@ <h2>No Theme</h2>
 				</p>
 				<demo-embed name="unstyled"></demo-embed>
 				<div id="tree-unstyled"></div>
+
+				<h2>Custom Theme</h2>
+				<p>
+					The theme that is used here on this example page can be
+					found in the repository and serves as a good boiler plate
+					for custom themes.
+				</p>
+				<script src="https://marcantondahmen.github.io/emgithub/embed-v2.js?target=https%3A%2F%2Fgithub.com%2Fmarcantondahmen%2Fsortable-tree%2Fblob%2Fmaster%2Fdemo%2Ftree.less%3Fts%3D2&style=dark&type=code&showLineNumbers=on&showFullPath=on&showCopy=on"></script>
 			</main>
 		</div>
 	</body>