Copy

<script setup lang="ts">
import { formatJsonForDisplay } from "utils/formatting";
import { computed } from "vue";

const props = defineProps<{
  json: any;
}>();

const html = computed(() => {
  if (!props.json) return "";
  return formatJsonForDisplay(props.json);
});
</script>

<template>
  <pre v-html="html" class="max-w-full overflow-x-auto"></pre>
</template>

<style>
@reference "src/style.css";

.k {
  @apply text-primary-500;
}

.v-str {
  @apply text-secondary-400;
}

.v-num {
  @apply text-secondary-400;
}

.v-bool {
  @apply text-secondary-400;
}
</style>