ponder.ooo
馃悕馃悕馃悕
1<script lang="ts">
2 import SvelteMarkdown from "svelte-markdown";
3 import CodeBlock from "./markdown/code_block.svelte";
4
5 export let message: PlainText;
6</script>
7
8<div class=display-container>
9 <!-- TODO: make "use markdown" a setting in PlainText
10 <pre class=display>{message.value}</pre>
11 -->
12 <pre class=display><SvelteMarkdown
13 source={message.value}
14 renderers={{ code: CodeBlock }}
15 /></pre>
16</div>
17
18<svelte:head>
19 <link rel="stylesheet" href="css/markdown.css" />
20</svelte:head>
21
22<style>
23 .display-container {
24 display: inline-block;
25 position: relative;
26 margin: 0;
27 padding: 0;
28 border: 0;
29 width: 100%;
30 height: 100%;
31 padding-bottom: 0.75em;
32 line-height: 0;
33 background-color: var(--code-editor-background);
34 }
35
36 .display {
37 position: relative;
38 padding: 0;
39 margin: 0;
40 top: 0.5em;
41 left: 0.5em;
42 width: calc(100% - 1em);
43 word-wrap: break-word;
44 overflow: auto;
45 white-space: pre-wrap;
46 line-height: 0;
47 }
48
49 /* Identical to scrollbar styling of script_input.svelte. consider extracting to site.css */
50 ::-webkit-scrollbar {
51 width: 0.5em;
52 position: absolute;
53 right: 0.5em;
54 }
55
56 ::-webkit-scrollbar-track {
57 background: #344;
58 cursor: pointer !important;
59 }
60
61 ::-webkit-scrollbar-thumb {
62 background: #788;
63 cursor: pointer !important;
64 }
65
66 ::-webkit-scrollbar-track:hover, ::-webkit-scrollbar-thumb:hover {
67 cursor: pointer !important;
68 user-select: none;
69 }
70</style>