Replies: 2 comments 3 replies
-
I don't know why this discussion hasn't been moved forward. Having a code sample in the hero page to showcase something is pretty standard at this point. I also wanted to use this in my website, I tried to hack around using builtin CSS classes but I found it to be counterproductive. Ideally the Markdown function should be exposed in the public API to allow custom usage. Something along these lines: ---
layout: home
---
<script setup>
import { createCodeGroup } from 'vitepress'
const codeGroup = createCodeGroup()
</script>
<template>
<div v-html="code-group"></div>
</template> @brc-dd do you propose any other solution? |
Beta Was this translation helpful? Give feedback.
-
@peterfox and @minenwerfer, since you can include Vue code in the markdown documents, you can use a a Teleport to inject a Vue.js component into the hero. I can share an example that I created. The code is by no means perfect, but you can modify it to suit your needs:
Don't forget to install Then use it as such in ---
layout: home
hero:
name: PureParse
# ...
---
<script setup>
import CodeBlock from "/components/CodeBlock.vue";
import WithinHero from "/components/WithinHero.vue";
const code = `
type User = {
id: number
name: string
}
const parseUser = object<User>({
id: parseNumber,
name: parseString,
})
`
</script>
<WithinHero>
<CodeBlock :code="code">
<template #caption>Declare the type:</template>
</CodeBlock>
</WithinHero> Result: |
Beta Was this translation helpful? Give feedback.
-
I want to add a simple code block to the Hero page of my docs at https://feature-flags.docs.ylsideas.co/
I already have a custom theme based on the default theme. I can edit VPHome.vue to include code, but I don't know how to get the styles/functionality that is in the markdown docs.
How would I go about adding a code block with the same styles and the copy button etc., to that component?
My best guess is maybe I need to add a component that then converts the contents to Markdown, or there's simply a component I need to add to the page and configure it to show bash highlighting and pass in the contents.
Beta Was this translation helpful? Give feedback.
All reactions