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.
80 lines
1.9 KiB
80 lines
1.9 KiB
<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>
|