stufflog2/svelte-ui/src/components/Markdown.svelte

<script lang="ts">
  import marked from "marked";
  import insane from "insane";
  export let source = "";

  let outputHtml: string;

  $: outputHtml = insane(marked(source, {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(img) {
    width: 100%;
  }

  div.markdown :global(ol), div.markdown :global(ul) {
    padding: 0.5em;
    margin: 0.25em 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>