add markdown support to descriptions.

2021-01-17 13:51:15 +01:00
parent 033abaa5bb
commit a99aa8aa2c
6 changed files with 98 additions and 17 deletions
@@ -0,0 +1,75 @@
+<script lang="ts">
+  import marked from "marked";
+  export let source = "";
+
+  let outputHtml: string;
+
+  $: outputHtml = marked(source, {sanitize: true, smartypants: true});
+</script>
+
+<div class="markdown">{@html outputHtml}</div>
+
+<style>
+  div.markdown :global(p) {
+    padding: 0;
+    margin: 0.25em 0;
+  }
+
+  div.markdown :global(code) {
+    background-color: #222;
+    color: #1cf;
+  }
+
+  div.markdown :global(pre) > :global(code) {
+    display: block;
+    background-color: #222;
+    color: #1cf;
+    padding: 0.5em;
+  }
+
+  div.markdown :global(blockquote) {
+    display: block;
+    border-left: 4px solid #333;
+    padding: 0.5em;
+    margin: 0.5em 0;
+  }
+
+  div.markdown :global(ol), div.markdown :global(ul) {
+    padding: 0.5em;
+    margin: 0.5em 0;
+    margin-left: 1ch;
+  }
+
+  div.markdown :global(ul) {
+    list-style: none;
+  }
+
+  div.markdown :global(ol) {
+    list-style: none;
+    counter-reset: li;
+  }
+
+  div.markdown :global(ul) :global(li:before) {
+    content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
+    color: #333; /* Change the color */
+    font-weight: bold; /* If you want it to be bold */
+    display: inline-block; /* Needed to add space between the bullet and the text */
+    width: 1em; /* Also needed for space (tweak if needed) */
+    margin-left: -1em; /* Also needed for space (tweak if needed) */
+  }
+
+  div.markdown :global(ol) :global(li) {
+    counter-increment: li;
+  }
+
+  div.markdown :global(ol) :global(li:before) {
+    content: counter(li)'.';
+    color: #333; /* Change the color */
+    font-weight: bold; /* If you want it to be bold */
+    display: inline-block; /* Needed to add space between the bullet and the text */
+    width: 1.75em; /* Also needed for space (tweak if needed) */
+    margin-left: -1.5em; /* Also needed for space (tweak if needed) */
+    padding-right: 0em;
+    text-align: center;
+  }
+</style>