vuepress

vuepress copied to clipboard

Feature request

What problem does this feature solve?

Currently VuePress adds v-pre to code blocks, but not to inline <code> tags (e.g. created by backticks). Which means that you must wrap inline code with ::: v-pre to disable interpolation, or manually write out <code v-pre>...</code> rather than using backticks.

That feels like an unnecessary step though – I think it’s generally safe to assume that inline could should not support interpolation, just like it was safe to assume that for code blocks.

What does the proposed API look like?

No API changes.

How should this be implemented in your opinion?

This would only require a small additional MarkdownIt plugin alongside the others like convertRouterLinkPlugin, which replaces the code_inline render with one that includes the v-pre attribute:

const { escapeHtml } = require('markdown-it/lib/common/utils');

md.renderer.rules.code_inline = (tokens, idx, options, env, renderer) => {
  let token = tokens[idx];
  return  '<code v-pre' + renderer.renderAttrs(token) + '>' +
    escapeHtml(token.content) +
    '</code>';
}

Are you willing to work on this yourself?

Yes. In fact I’ve already implemented it for a custom VuePress theme I maintain: https://github.com/pixelandtonic/vuepress-theme-craftdocs/commit/e56d7c7cba16730e2fed4c11ab83ee7e5c9b63d6

@billyyyyy3320 any update on this issue? has it been reviewed?

We are documenting our Helm chart and needed to provide example go-templates in the documentation, e.g.

here's a Helm variable to use: `{{ .Release.Namespace }}`