Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ptandler opened this issue Jan 21, 2020 · 8 comments
Labels
status: core team review Priority issues for the core team to review topic: config Relates to VuePress config type: enhancement Request to enhance an existing feature

Comments

@ptandler
Copy link

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
Copy link
Collaborator

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

@bencodezen
Copy link
Member

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?

@bencodezen bencodezen added the need feedback Awaiting author response label Jan 31, 2020
@ptandler
Copy link
Author

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.

@bencodezen bencodezen added type: enhancement Request to enhance an existing feature topic: config Relates to VuePress config status: core team review Priority issues for the core team to review and removed need feedback Awaiting author response labels Feb 2, 2020
@haoranpb
Copy link
Contributor

haoranpb commented Mar 5, 2020

@Nastradoomus brought up an interesting idea in #2186

@Nastradoomus
Copy link

Nastradoomus commented Mar 13, 2020

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
Copy link
Author

@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
Copy link

Nastradoomus commented Mar 13, 2020

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
Copy link
Author

ptandler commented Mar 20, 2020

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
status: core team review Priority issues for the core team to review topic: config Relates to VuePress config type: enhancement Request to enhance an existing feature
Projects
None yet
Development

No branches or pull requests

5 participants