Skip to content

Interpolation should be disabled for inline code #2377

@brandonkelly

Description

@brandonkelly

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: pixelandtonic/vuepress-theme-craftdocs@e56d7c7

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions