From 8164b79667d685087355f6882882030dd64daf5f Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Mon, 15 Aug 2022 14:19:42 +0200
Subject: [PATCH] Improved markdown formatting Fixed pre-code breaking out of
 containers

---
 app/imports/ui/components/MarkdownText.vue |  7 --
 app/imports/ui/styles/markdown.css         | 90 ++++++++++++++++++++++
 app/imports/ui/styles/stylesIndex.js       |  1 +
 3 files changed, 91 insertions(+), 7 deletions(-)
 create mode 100644 app/imports/ui/styles/markdown.css

diff --git a/app/imports/ui/components/MarkdownText.vue b/app/imports/ui/components/MarkdownText.vue
index 681878d2..ab9d35b2 100644
--- a/app/imports/ui/components/MarkdownText.vue
+++ b/app/imports/ui/components/MarkdownText.vue
@@ -24,10 +24,3 @@
     },
 	}
 </script>
-
-<style lang="css">
-  .markdown img {
-    max-width: 100%;
-    margin: 8px 0;
-  }
-</style>
diff --git a/app/imports/ui/styles/markdown.css b/app/imports/ui/styles/markdown.css
new file mode 100644
index 00000000..27d4c1cb
--- /dev/null
+++ b/app/imports/ui/styles/markdown.css
@@ -0,0 +1,90 @@
+.markdown h1,
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  line-height: initial;
+  margin-bottom: 12px;
+}
+
+.markdown h1:not(:first-child),
+.markdown h2:not(:first-child),
+.markdown h3:not(:first-child),
+.markdown h4:not(:first-child),
+.markdown h5:not(:first-child),
+.markdown h6:not(:first-child) {
+  margin-top: 24px;
+}
+
+:not(:first-child) .markdown h1 {
+  font-size: 2rem;
+  letter-spacing: -.0083333333em;
+  font-weight: 300;
+}
+
+.markdown h2 {
+  font-size: 1.5rem;
+  font-weight: 400;
+}
+
+.markdown h3 {
+  font-size: 1.25rem;
+  letter-spacing: .0073529412em;
+  font-weight: 400;
+}
+
+.markdown h4 {
+  font-size: 1rem;
+  letter-spacing: .0125em;
+  font-weight: 500;
+}
+
+.markdown h5 {
+  font-size: 0.95rem;
+  letter-spacing: .0125em;
+  font-weight: 500;
+}
+
+.markdown h6 {
+  font-size: 0.875rem;
+  letter-spacing: .0125em;
+  font-weight: 500;
+}
+
+.markdown pre code {
+  display: block;
+  overflow: auto;
+}
+
+.theme--dark.v-application .markdown hr {
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+.markdown img {
+  max-width: 100%;
+  margin: 8px 0;
+}
+
+.markdown table {
+  min-width: 100%;
+  border-spacing: 0;
+  margin-bottom: 16px;
+}
+
+.markdown th {
+  font-weight: initial;
+  padding: 4px;
+}
+
+.markdown td {
+  padding: 2px 4px;
+}
+
+.markdown tbody>tr:nth-child(odd) {
+  background-color: rgba(0, 0, 0, 0.1)
+}
+
+.theme--dark.v-application .markdown tbody>tr:nth-child(odd) {
+  background-color: rgba(255, 255, 255, 0.1)
+}
\ No newline at end of file
diff --git a/app/imports/ui/styles/stylesIndex.js b/app/imports/ui/styles/stylesIndex.js
index 383664b1..f9a49d9c 100644
--- a/app/imports/ui/styles/stylesIndex.js
+++ b/app/imports/ui/styles/stylesIndex.js
@@ -6,5 +6,6 @@ import './fitAvatars.css';
 import './inheritBackgrounds.css';
 import './largeFormatInputs.css';
 import './lineClamp.css';
+import './markdown.css';
 import './speedDial.css';
 import './toolbarFlex.css';