@nuxt/devtools-ui-kit/dist/components/NCodeBlock.vue

<a href="https://www.npmjs.com/package/@nuxt/devtools-ui-kit-edge"><img src="https://flat.badgen.net/npm/v/@nuxt/devtools-ui-kit-edge"></a>

<script setup lang="ts">
// This components requires to run in DevTools to render correctly
import { computed, nextTick } from 'vue'
import type { BuiltinLanguage } from 'shiki'
import { devToolsClient } from '../runtime/client'

const props = withDefaults(
  defineProps<{
    code: string
    lang?: BuiltinLanguage | 'text'
    lines?: boolean
    transformRendered?: (code: string) => string
  }>(),
  {
    lines: true,
  },
)

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) || { code: props.code, supported: false }
  if (result.supported && props.transformRendered)
    result.code = props.transformRendered(result.code)
  if (result.supported)
    nextTick(() => emit('loaded'))
  return result
})
</script>

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

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