Make code elements resizable.

Gohla · Sep 20, 2023 · 0444b00 · 0444b00
1 parent 3dd525d
commit 0444b00
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 3 deletions.
diff --git a/tutorial/mdbook-diff2html/src/preprocessor.rs b/tutorial/mdbook-diff2html/src/preprocessor.rs
@@ -102,7 +102,7 @@ fn to_absolute_path(source_directory: &Path, source_file_path: Option<&Path>, re
 fn diff_to_html(diff: &str, div_id_counter: usize) -> String {
   let diff = diff.replace('$', r#"${"$"}"#);
   let diff = diff.replace('`', r#"${"`"}"#);
-  format!(r#"<div id="diff2html_{div_id_counter}"></div>
+  format!(r#"<div class="diff2html" id="diff2html_{div_id_counter}"></div>
 
 <script>
   document.addEventListener('DOMContentLoaded', function () {{

diff --git a/tutorial/src/diff2html.min.css b/tutorial/src/diff2html.min.css
@@ -71,7 +71,10 @@
   border: 1px solid var(--code-border-color);
   /* CHANGE: remove radius */
   /*border-radius: 3px;*/
-  margin-bottom: 1em
+  margin-bottom: 1em;
+  /* CHANGE: make resizable */
+  resize: horizontal;
+  overflow-x: auto;
 }
 
 .d2h-file-collapse {

diff --git a/tutorial/theme/css/general.css b/tutorial/theme/css/general.css
@@ -27,6 +27,9 @@ code {
   font-size: var(--code-font-size);
   /* CHANGE: set background here, instead of it being defined on .hljs in highlight.js */
   background-color: var(--code-bg);
+  /* CHANGE: make resizable */
+  resize: horizontal;
+  overflow-x: auto;
 }
 
 pre > code {

diff --git a/tutorial/theme/css/variables.css b/tutorial/theme/css/variables.css
@@ -3,7 +3,7 @@
 :root {
   --sidebar-width: 300px;
   --page-padding: 15px;
-  --content-max-width: 1200px;
+  --content-max-width: 1000px;
   --menu-bar-height: 50px;
   --mono-font: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace;
   --code-font-size: 0.875em /* please adjust the ace font size accordingly in editor.js */