File size: 1,295 Bytes
a03b3ba |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
<script lang="ts">
import { createEventDispatcher } from "svelte";
import { copy } from "@gradio/utils";
import MarkdownCode from "./MarkdownCode.svelte";
export let elem_classes: string[] = [];
export let visible = true;
export let value: string;
export let min_height = false;
export let rtl = false;
export let sanitize_html = true;
export let line_breaks = false;
export let latex_delimiters: {
left: string;
right: string;
display: boolean;
}[];
export let header_links = false;
const dispatch = createEventDispatcher<{ change: undefined }>();
$: value, dispatch("change");
</script>
<div
class:min={min_height}
class="prose {elem_classes.join(' ')}"
class:hide={!visible}
data-testid="markdown"
dir={rtl ? "rtl" : "ltr"}
use:copy
>
<MarkdownCode
message={value}
{latex_delimiters}
{sanitize_html}
{line_breaks}
chatbot={false}
{header_links}
/>
</div>
<style>
div :global(.math.inline) {
fill: var(--body-text-color);
display: inline-block;
vertical-align: middle;
padding: var(--size-1-5) -var(--size-1);
color: var(--body-text-color);
}
div :global(.math.inline svg) {
display: inline;
margin-bottom: 0.22em;
}
div {
max-width: 100%;
}
.min {
min-height: var(--size-24);
}
.hide {
display: none;
}
</style>
|