Replies: 1 comment 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.
3 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
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