-
Notifications
You must be signed in to change notification settings - Fork 4.7k
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
Comments
I'm not sure if it can be not a huge effort to implement. Besides, IMO, you should override its styles instead. |
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? |
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. |
@Nastradoomus brought up an interesting idea in #2186 |
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:
Instead of
in .vue -files. Very useful and easy to use feature. Please remember that:
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. |
@Nastradoomus - But is it somehow possible to use the |
Try NavLink.vue:
take out {{ item.text }} and add v-html="item.text"
If you want to filter only language data check NavLinks.vue.
|
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
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. |
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.
The text was updated successfully, but these errors were encountered: