malice

<script lang="ts">

  import EmojiText from './EmojiText.svelte';

  import { hasCode, parseCode } from './code';

  export let text: string;

  export let jumbo = false;

  $: segments = parseCode(text);

  $: plain = !hasCode(segments);

</script>

{#if plain}<EmojiText {text} {jumbo} />{:else}{#each segments as s}{#if s.kind === 'inline'}<code class="inline">{s.text}</code>{:else if s.kind === 'block'}<pre class="block"><code>{s.text}</code></pre>{:else}<EmojiText text={s.text} />{/if}{/each}{/if}

<style>

  code {

    font-family: ui-monospace, 'JetBrains Mono', 'Fira Code', Menlo, monospace;

    font-size: 0.9em;

  }

  .inline {

    padding: 1px 5px;

    border-radius: 4px;

    background: var(--bg-soft);

    border: 1px solid var(--border);

  }

  .block {

    margin: 4px 0;

    padding: 8px 10px;

    border-radius: 6px;

    background: var(--bg-soft);

    border: 1px solid var(--border);

    overflow-x: auto;

    white-space: pre;

    line-height: 1.4;

  }

</style>