Inline double curly escaping inside a paragraph

[diegoperini]

Feature request

It is currently not possible to escape {{ }} without breaking the paragraph. It hurts the ability to write docs for template languages.

What problem does this feature solve?

Assuming a template like Jinja, Handlebar.js used VuePress for documentation, they currently wouldn't be able to show inline examples.

What does the proposed API look like?

I'm not an expert on this so I don't have a strong proposition on what to choose here. Something like \{{{ \}}} would work I guess.

How should this be implemented in your opinion?

We already have ::: v-pre, so it should work the same.

Are you willing to work on this yourself?**

I don't think I'm fluent enough in VuePress codebase to be able to implement this.

[tychenjiajun]

@diegoperini I see the doc of Vue.js using {% raw %}{% endraw %} to escape inline double curly. I tried it in the latest version of Vuepress(1.0.0-alpha.11) but it doesn't work. I think they might add it to the stable version.

[skyrpex]

The problem is that ::: v-pre doesn't work without multiline. Maybe it's worth allowing this:

| Example    |
|:----------|
| ::: v-pre `'{{ example }}'` ::: |

[SimeonRoss]

Is there anyway to get this to work? We are running into this issue and it would be a deal breaker for us :(

[shigma]

Why not try

::: v-pre 
| Example    |
|:----------|
| `'{{ example }}'`|
:::

or

<code v-pre>'{{ example }}'</code>

?

[SimeonRoss]

We are having to do <span v-pre>{{some text}}</span> all over our docs. Given that we're documenting how moustache works and it uses double curlys, this adds up to hundreds of references. It would be nice if you offered a less hacky solution.

[shigma]

@SimeonRoss Have you tried the first solution?

[SimeonRoss]

The only thing that works for us at the moment is:
<span v-pre>{{some text}}</span>

however that makes our docs markup quite wordy when double curlys are everywhere our docs. It would be nice if there was a nicer, shorter way to escape them or a way to tel Vue not to interprete them.

[shigma]

@SimeonRoss Are you using the latest version of VuePress? I have test with the first solution, and it works well.

[SimeonRoss]

The table format? I'm using 0.14.4

[SimeonRoss]

There are further issues with this. If I try to use them in a header like so:
## <span v-pre>{{ asdfadsf }}</span>

Then it renders on the page fine but the hierarchy is broken:

If I try to use it without the span:
## {{ asdfadsf }}

Then it appears in the side bar but the header is missing:

[tjanez]

I used the <code v-pre>{{ example }}</code> solution but I think it is too verbose and the project should look for a simpler syntax to support these types of use cases.