[Bug report] Character combination "$&" unexpectedly replaced by <!--vuepress-ssr-app--> in code blocks

[zhangyx1998]

Bug report

Description

I am creating a vuepress2 website with its default theme. I found that a certain sequence of input ($&) will be replaced by comment <!--vuepress-ssr-app--> which seems to be used internally as a special insertion mark.

Additional information

This problem only happens on vuepress build outputs, vite dev server (vuepress dev) renders correctly.

Steps to reproduce

1. Follow the steps posted on official guide (using npm)
2. In addition to echoing #Hello word into README.md, add the following code block into the markdown source file:

     ```
     $"
     ```

3. run vuepress build docs, the combination $" will firstly be translated into $", and then converted to <!--vuepress-ssr-app-->quot;. Final result looks like qout;

• Reproduction link / repo: docs.ysyx.org

Expected behavior

The character combination $" is expected to be rendered as readable text like:

$"

INSTEAD OF:

qout;

Screenshots

With this problem	Expected result

Environment info

• Browser: Chrome, Safari (This seems to be a compile-time problem, browser should not be relevant)
• Output of vuepress info:

  System:
    OS: macOS 12.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 453.55 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 17.6.0 - /opt/homebrew/bin/node
    Yarn: 1.22.17 - /opt/homebrew/bin/yarn
    npm: 8.5.1 - /opt/homebrew/bin/npm
  Utilities:
    Git: 2.32.0 - /usr/bin/git
  Browsers:
    Chrome: 98.0.4758.109
    Edge: Not Found
    Firefox: Not Found
    Safari: 15.2
  npmPackages:
    @vuepress/bundler-vite:  2.0.0-beta.35 
    @vuepress/bundler-webpack: Not Found
    @vuepress/cli:  2.0.0-beta.35 
    @vuepress/client:  2.0.0-beta.35 
    @vuepress/core:  2.0.0-beta.35 
    @vuepress/markdown:  2.0.0-beta.35 
    @vuepress/plugin-active-header-links:  2.0.0-beta.35 
    @vuepress/plugin-back-to-top:  2.0.0-beta.35 
    @vuepress/plugin-container:  2.0.0-beta.35 
    @vuepress/plugin-docsearch: Not Found
    @vuepress/plugin-external-link-icon:  2.0.0-beta.35 
    @vuepress/plugin-git:  2.0.0-beta.35 
    @vuepress/plugin-google-analytics: Not Found
    @vuepress/plugin-medium-zoom:  2.0.0-beta.35 
    @vuepress/plugin-nprogress:  2.0.0-beta.35 
    @vuepress/plugin-palette:  2.0.0-beta.35 
    @vuepress/plugin-prismjs:  2.0.0-beta.35 
    @vuepress/plugin-pwa: Not Found
    @vuepress/plugin-pwa-popup: Not Found
    @vuepress/plugin-register-components: Not Found
    @vuepress/plugin-search: ^2.0.0-beta.35 => 2.0.0-beta.35 
    @vuepress/plugin-shiki: Not Found
    @vuepress/plugin-theme-data:  2.0.0-beta.35 
    @vuepress/plugin-toc: Not Found
    @vuepress/shared:  2.0.0-beta.35 
    @vuepress/theme-default:  2.0.0-beta.35 
    @vuepress/utils:  2.0.0-beta.35 
    vue:  3.2.31 
    vue-loader: Not Found
    vue-router:  4.0.12 
    vuepress: ^2.0.0-beta.35 => 2.0.0-beta.35 
    vuepress-vite:  2.0.0-beta.35 
    vuepress-webpack: Not Found

[filonik]

I had a similar problem while trying to integrate MathJax with vuepress-next, since the old plugin has not been ported yet. Typically, MathJax is configured with an inline script like this (see documentation):

<script>
MathJax = {
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']]
  },
  svg: {
    fontCache: 'global'
  }
};
</script>
<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js">
</script>

Just like in your case, the $ symbols seem to act as special insertion marks and were replaced by a bunch of code. The use of $ seems very fragile, perhaps a longer character sequence could be used with less potential for collisions?

[zhangyx1998]

I had a similar problem while trying to integrate MathJax with vuepress-next, since the old plugin has not been ported yet. Typically, MathJax is configured with an inline script like this (see documentation):

<script>
MathJax = {
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']]
  },
  svg: {
    fontCache: 'global'
  }
};
</script>
<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js">
</script>

Just like in your case, the $ symbols seem to act as special insertion marks and were replaced by a bunch of code. The use of $ seems very fragile, perhaps a longer character sequence could be used with less potential for collisions?

Thank you for the advice!

However, the problem was actually found in markdown contents. The dollar character is part of the document content, and is intended to be directly rendered to display. I could not simply redefine it like what you did in your case, because I would then alter the original meaning of the content.

[Mister-Hope]

Seems only appeared in vite:

https://github.com/vuepress/vuepress-next/blob/6d66a46a274c2b82a3d13a14555cbc6b77aff36e/packages/%40vuepress/bundler-vite/src/plugins/createConstantsReplacementPlugin.ts#L44-L49

Try webpack as a workaround before he fix it.

[meteorlxy]

Definitely caused by this :

https://github.com/vuepress/vuepress-next/blob/6f5d13289dd41dbb55d883ff8bff996e77b6daf9/packages/%40vuepress/bundler-vite/src/build/renderPage.ts#L78

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#specifying_a_string_as_a_parameter