Support `$doc.variable` in code blocks

[jeannen]

Hi!

The $doc.variableName data binding works well for plain text, but when trying to add it into a code block, it doesn't work

For example:

This displays the ID properly:

The project is {{ $doc.projectId }} 

This displays {{ $doc.projectId }}

'''html [Project ID]
<script src="https://heyo.so/embed/script.js?projectId={{ $doc.projectId }}"></script>
'''

This would be really helpful to make better docs (in this case, pre-fill the ID so users can copy the code snippet directly)

[farnabaz]

This is tricky to implement, specially due to syntax highlighting.

To achieve your goal, you can create a custom component to render dynamic code.

<template>
   <pre>{{ code }}</pre>
</template>

<script setup>
const props = defineProps<{ projectId: string }>()

const code = computed(() => `....`)
</script>

And use it instead of code block

::embed-script{:project-id="projectId"}
::

[jeannen]

This is tricky to implement, specially due to syntax highlighting.

To achieve your goal, you can create a custom component to render dynamic code.

And use it instead of code block

::embed-script{:project-id="projectId"} ::

But then I can't use the markdown file, and the code in computed is messy, especially since I have different snippets based on the integration/language 😅

[jeannen]

Any chance we could have this one day?

[github-actions[bot]]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 30 days.

[jeannen]

Still encountering the issue, would be great to have this...