You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
<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>
|