0

How to force break lines in VuePress markdown files, using default theme? I have tagline like this: tagline: 'Lorem ipsum' and I don't know how to split it 2 lines.

I've tried solution mentioned in VuePress tutorial, that is

tagline: 'Lorem⋅⋅
ipsum'

(dots represent spaces) but it was still rendered in single line. I am using VuePress v1.4.0.

Lancea Tech
  • 1
  • 1

1 Answers1

0

The "frontmatter" of a page is in YAML format and not in Markdown.

Since you can add custom CSS to your Vuepress site, you can use the CSS whitespace property to preserve the whitespace from your frontmatter. (Credit to this answer).

To target the element that contains the tagline specifically, you can add this CSS to a file at docs/.vuepress/styles/index.styl:

.home .hero .description {
  white-space: pre;
}

You can of course modify the CSS to cater for all of the frontmatter properties with maybe just .home .hero or even just .home.

Then you would be able to use blank lines like you have above in your YAML.

D Malan
  • 10,272
  • 3
  • 25
  • 50
  • It didn't work at first, because VuePress didn't keep original whitespaces as they're defined in markdown file when generating output html file, BUT I did some more experiments, and this version finally worked - with the CSS you've provided: `tagline: "Lorem\nipsum"`. Thanks! – Lancea Tech Apr 04 '20 at 06:51
  • PS I needed to use `white-space: pre-wrap` to keep both line breaks where I needed it, and automatic wrapping of long text in other places. – Lancea Tech Apr 04 '20 at 07:08