<script setup>
import { computed, nextTick } from "vue";
import { devToolsClient } from "../runtime/client";
const props = defineProps({
  code: { type: String, required: true },
  lang: { type: String, required: false },
  lines: { type: Boolean, required: false, default: true },
  inline: { type: Boolean, required: false },
  grammarContextCode: { type: String, required: false },
  transformRendered: { type: Function, required: false }
});
const emit = defineEmits(["loaded"]);
const rendered = computed(() => {
  const result = props.lang === "text" ? { code: props.code, supported: false } : devToolsClient.value?.devtools.renderCodeHighlight(props.code, props.lang, { grammarContextCode: props.grammarContextCode }) || { code: props.code, supported: false };
  if (result.supported && props.transformRendered)
    result.code = props.transformRendered(result.code);
  if (result.supported)
    nextTick(() => emit("loaded"));
  return result;
});
const classes = computed(() => [
  "n-code-block shiki",
  props.lines && !props.inline ? "n-code-block-lines" : ""
]);
</script>

<template>
  <template v-if="lang && rendered.supported">
    <pre :class="classes"><code v-html="rendered.code" /></pre>
  </template>
  <template v-else>
    <pre :class="classes"><code><template v-for="line, _idx in code.split('\n')" :key="_idx"><span class="line" v-text="line" /><br></template></code></pre>
  </template>
</template>

<style>
.n-code-block-lines code{counter-increment:step calc(var(--start, 1) - 1);counter-reset:step}.n-code-block-lines code .line:before{content:counter(step);counter-increment:step;display:inline-block;margin-right:.5rem;padding-right:.5rem;text-align:right;width:2.5rem;--uno:text-truegray/50}
</style>
