Unescaped code blocks syntax highlight doesn't work

[salazarr-js]

Describe the bug

When using Unescaped code blocks with the content coming from a string variable or a data loader, the code blocks aren't highlighted

```ts-vue
{{ scriptString }}
```

```ts-vue
{{ scriptData }}
```

<script setup lang="ts">
import { data } from './examples.data'

const scriptData = data

const scriptString = `
/** Generate a greet message with a provided text */
function greet(text) {
  return \`Hello, \${text}\`;
}

console.log(greet('world'));
`
</script>

Reproduction

https://stackblitz.com/edit/vite-ucyboc?file=docs%2Fexamples%2Ftest-example.md

Expected behavior

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 AMD Ryzen 7 5800X 8-Core Processor
    Memory: 16.46 GB / 31.91 GB
  Binaries:
    Node: 20.17.0 - ~\AppData\Local\fnm_multishells\29352_1729538469442\node.EXE
    npm: 10.8.2 - ~\AppData\Local\fnm_multishells\29352_1729538469442\npm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.86)
    Internet Explorer: 11.0.22621.3527

### Additional context

_No response_

### Validations

- [X] Check if you're on the [latest VitePress version](https://github.com/vuejs/vitepress/releases/latest).
- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)
- [X] Read the [docs](https://vitepress.dev).
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[brc-dd]

See #2315

return html from your loader and use <div v-html="data" />

#2921 (comment)

[salazarr-js]

@brc-dd I wasn't lucky with the createMarkdownRenderer method, not sure if I did it right

import { readFileSync } from 'node:fs'
import { createMarkdownRenderer } from 'vitepress'

const config = globalThis.VITEPRESS_CONFIG
const md = await createMarkdownRenderer(config.srcDir, config.markdown, config.site.base, config.logger)

function getScriptCodeBlock(scriptText) {
  return md.render(
    `
    \`\`\`ts
    ${scriptText}
    \`\`\`
    `,
  )
}

export default {
  watch: ['./scripts/*.ts'],
  load(watchedFiles) {
    return watchedFiles.reduce((acc, file) => {
      const fileName = file.match(/([^/]+)(?=\.ts$)/)[0]
      // const fileName = file.match(/[^/]+\.ts$/)[0]

      return {
        ...acc,
        [`${fileName}`]: getScriptCodeBlock(readFileSync(file, 'utf-8')),
      }
    }, {})
  },
}

but I found that in my case import the scripts as code snippets works perfectly

<<< ./scripts/01-first-scene.ts

I want to have the examples scrips on separated files so I can import and implement them or use them as text in a code block

⁉️ why isn't the createMarkdownRenderer API mentioned in the docs?

[brc-dd]

it should be:

  return md.render(
    `
\`\`\`ts
${scriptText}
\`\`\`
    `
  )

// or simply

return md.render("\n```ts\n" + scriptText + "\n```\n") 

(remove leading spaces from the code block, otherwise it will be considered an indented code block)

---

why isn't the createMarkdownRenderer API mentioned in the docs?

Ah, it is stable and public API, but not exactly user friendly. We probably should just expose the markdown render function for these use cases, which should use a global markdown-it instance. Currently, hmr is bit slow if you update your data loader file and it has createMarkdownRenderer calls (because it needs to re-initialize shiki).