[Bug report] Character combination "$&" unexpectedly replaced by  in code blocks

zhangyx1998 commented 2 years ago

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  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

Follow the steps posted on official guide (using npm)
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 `$&quot;`, and then converted to `<!--vuepress-ssr-app-->quot;`. Final result looks like `qout;`

<!-- Steps to reproduce the behavior -->

- Reproduction link / repo: [docs.ysyx.org](https://docs.ysyx.org/ics-pa/1.6.html#%E6%89%A9%E5%B1%95%E8%A1%A8%E8%BE%BE%E5%BC%8F%E6%B1%82%E5%80%BC%E7%9A%84%E5%8A%9F%E8%83%BD)

### Expected behavior

<!-- A clear and concise description of what you expected to happen. -->
The character combination `$"` is expected to be rendered as readable text like:

$"


INSTEAD OF:

qout;


### Screenshots

| With this problem | Expected result |
|:------:|:------:|
|![image](https://user-images.githubusercontent.com/37485759/155967706-c6c2f9db-073f-4448-8b35-6e4bbb9f3d8d.png)|![image](https://user-images.githubusercontent.com/37485759/155967936-543a7d8f-277c-43d1-bc42-6fa63dc94464.png)|

<!-- If applicable, add screenshots to help explain your problem. -->

### Environment info

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

```bash
  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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

vuepress / core