vitepress: Markdown Style on the Homepage does not work properly

@kiaking First, thank you for the work on Vitepress. It’s very powerful!

Currently, this is intentional. Homepage has different layout system then docs page. When adding content into home layout, you should style the content your self.

I don’t like this approach. With a tool like this I would expect to be able to just add markdown like any other page or layout and have it just work. If I am using VP I am likely trying to bootstrap a site with minimal effort and maximum output. That seems like the objective of such a tool. But when I can’t just add markdown to the homepage without inserting custom styles this seems like an unnecessary roadblock.

I faced the same issue and created a component HomeContent.vue to wrap my home markdown content:

<template>
  <div class="vp-doc container">
    <slot />
  </div>
</template>

<style scoped>
.container {
  margin: auto;
  width: 100%;
  max-width: 1280px;
  padding: 0 24px;
}

@media (min-width: 640px) {
  .container {
    padding: 0 48px;
  }
}

@media (min-width: 960px) {
  .container {
    width: 100%;
    padding: 0 64px;
  }
}
</style>

For now, you can just wrap your markdown with <div class="vp-doc">...</div> to get similar styles

How would this work? I’ve attempted this:

<div class="vp-doc">
## Heading
Text
</div>

As I expected, markdown isn’t rendered inside the HTML tags, I see the “##” characters. What am I missing? I’m using layout: home.

EDIT: I’ve solved this, it was a matter of inserting line breaks before and after the HTML tags for markdown to be parsed. I couldn’t find any documentation on this behaviour though. I’m glad markdown isn’t supported only at top-level though.

For now, you can just wrap your markdown with <div class="vp-doc">...</div> to get similar styles (some styles and functions may not work as they might be scoped for example headings don’t get that anchor icon, code block doesn’t get copy button, etc). Also, you’ll have to add some container like thing too to keep it aligned with the hero section.

@kiaking First, thank you for the work on Vitepress. It’s very powerful!

Currently, this is intentional. Homepage has different layout system then docs page. When adding content into home layout, you should style the content your self.

I don’t like this approach. With a tool like this I would expect to be able to just add markdown like any other page or layout and have it just work. If I am using VP I am likely trying to bootstrap a site with minimal effort and maximum output. That seems like the objective of such a tool. But when I can’t just add markdown to the homepage without inserting custom styles this seems like an unnecessary roadblock.

I very much agree, the first thing the get started tells you is to create an index.md (a markdown file) so literally the first thing I tried (writting markdown), didn’t work as expected, (doesn’t render as markdown) with no instructions on how to get such expected behavior.

I think the index.md needs to have a decent out of the box styling (which seems to be the entire value of vp), else it should just have been an index.yml file with only the frontmatter.

Yes, the DOM is the same. So you get Markdown parsing, but without styles. Because there’s a good chance you want to have bigger <h2> font size for example.

I Want add some words and code example on the homePage，

Thanks good to know! If we want to add such section, I think it’s best to wrap it inside some kind of section component.

Because for example in Homepage, the max width is set to 1152px but that’s way too large for normal texting. We should take care such section in a way that it looks perfectly beautiful 👍

Seems like it would make sense to wrap the home layout specific frontmatter content in the wider width container, and print any additional content in the normal style of every other page.

It definitely feels broken that this isn’t the default behaviour (Especially given there’s no mention of that in the docs)

if user onily need If the user just wants to add some simple descriptive language and code blocks to the front page

But now they have no style, which looks very much like a bug

If a custom component is recommended, it will increase the cost of getting started for newcomers

Users who do this generally expect their styles to remain theme defaults

But the Dom renders just like the document type

I remember that in VuePress the home page style was also the one that applied the content of the document correctly

My Case

I Want add some words and code example on the homePage，