Is it possible to use markup in frontmatter or config texts (themeConfig) in VuePress?

[ptandler]

Feature request

I did ask this question on StackOverflow a while ago and didn't get any reply.

So I guess that this is rather a feature request and not a question - right? ;-)

What problem does this feature solve?

The text for e.g. the language dropdown or serviceWorker.updatePopup is defined in the config.js. And there might be frontmatter values also defining text.

Currently; I'm not aware of any possibility to use markup (bold / italic / images) there.

What does the proposed API look like?

Be able to use markup in all places where texts are defined - in the same way as it is used normally.

How should this be implemented in your opinion?

Pipe text defined in config.js, frontmatter and other places through the normal markup processing.

With respect to the frontmatter it must be possible to define, which values might contain markup.

Are you willing to work on this yourself?

Well, yes, if I get some help to understand the software design and find the right places for the changes. I didn't look into the implementation of VuePress yet.

[billyyyyy3320]

I'm not sure if it can be not a huge effort to implement. Besides, IMO, you should override its styles instead.

[bencodezen]

Hey @ptandler! Thanks for filing the issue. Just to confirm, what you would like to do is use markdown syntax to style text from different areas of VuePress outside of the Markdown file itself. Is that correct?

[ptandler]

Hey @bencodezen! I'm glad I can clarify.

There are some texts defined in config.js, e.g.:

module.exports = {
  themeConfig: {
    locales: {
      "/": {
        selectText: "e.g. include flags for languages here as <img ...> or :flag_as_emoji: or font awesome or whatever",
        label: "English - here as well",
      },

And I guess there might also be some variables defined in the frontmatter where this could be helpful, but this is for me lower priority.

[haoranpb]

@Nastradoomus brought up an interesting idea in #2186

[Nastradoomus]

How should this be implemented in your opinion?

Pipe text defined in config.js, frontmatter and other places through the normal markup processing.

With respect to the frontmatter it must be possible to define, which values might contain markup.

I dug into this a while ago. The double brackets {{ text }} is rendered as text in Vue. If you want to render text as HTML you have to use the vue directive v-html="text"

HTML rendering has got nothing to do with vuepress (or frontmatter) and I think that we can close this.

If you want to use html inside .md files you can use syntax:

<p v-html="text"></p>

Instead of

<p>{{ text }}</p>

in .vue -files. Very useful and easy to use feature. Please remember that:

Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS attacks. Only use v-html on trusted content and never on user-provided content.

If you decide to let other users create static content on your page you should pipe the text that goes to the v-html through HTML Purifier or some other library that strips possibly malicious code.

[ptandler]

@Nastradoomus - But is it somehow possible to use the <p v-html="text"></p> syntax (or s.th. similar) in the frontmatter of an .md file or (in my case more important) in the config.js as in the example as mentioned in #2142 (comment) above?

[Nastradoomus]

Try NavLink.vue:

  <RouterLink
    v-if="isInternal"
    class="nav-link"
    :to="link"
    :exact="exact"
    @focusout.native="focusoutAction"
  >
    {{ item.text }}
  </RouterLink>

take out {{ item.text }} and add v-html="item.text"

  <RouterLink
    v-if="isInternal"
    class="nav-link"
    :to="link"
    :exact="exact"
    @focusout.native="focusoutAction"
    v-html="item.text"
  >
  </RouterLink>

If you want to filter only language data check NavLinks.vue.

         text: this.$themeLocaleConfig.selectText || 'Languages',
          ariaLabel: this.$themeLocaleConfig.ariaLabel || 'Select language',
...
          return [...this.userNav, languageDropdown]
      }
      return this.userNav
    }

[ptandler]

I had the idea to add an a method for entries in config.js and frontmatter to define how they should be treated: If there is a prefix string

• <!--html--> then the string is passed as plain html, with
• <!--md--> the string is sent through the "normal" markdown processing
• otherwise it is escaped as it is now

What do you think?

Generally, I prefer a solution that doesn't require to change components from the theme to ensure that the site doesn't have to worry about updated theme's components.

Of course this should not be used for input entered by users, but as far as I understand config.js and frontmatter is only edited by the developer, so there shouldn't be a security issue.