astro icon indicating copy to clipboard operation
astro copied to clipboard

🐛 BUG: Custom syntax highlighter problem with escaping < to &lt;

Open eliasbrange opened this issue 2 years ago • 4 comments

What version of astro are you using?

v1.0.0-beta.64

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

yarn

What operating system are you using?

Windows (WSL 2)

Describe the Bug

Setting syntaxHighlight: false and using a custom syntax shiki syntax highlighter escapes chars such as < and > in the resulting html. I'm using https://github.com/atomiks/rehype-pretty-code and all < and > are rendered as &lt; and &gt; respectively.

export default defineConfig({
  markdown: {
    syntaxHighlight: false,
    remarkPlugins: [],
    rehypePlugins: [[rehypePrettyCode, { theme: 'one-dark-pro' }]],
  },
});

Results in code fences getting rendered like

(parameter1, parameter2, ..., parameterN) =&gt; expression;

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-4oojmj

Participation

  • [ ] I am willing to submit a pull request for this issue.

eliasbrange avatar Jul 07 '22 07:07 eliasbrange

My guess is that it happens here:

https://github.com/withastro/astro/blob/b8c6dabfb788dc074f3520e03203b37d570b2526/packages/markdown/remark/src/index.ts#L95-L96

rehypeExpressions changes the type from text to raw and rehypeEscape then escapes all &, < and >

https://github.com/withastro/astro/blob/b8c6dabfb788dc074f3520e03203b37d570b2526/packages/markdown/remark/src/rehype-escape.ts#L10-L12

eliasbrange avatar Jul 07 '22 10:07 eliasbrange

Hi, I would have no problem doing a pr for that, Is there any information on what would be the desired behavior though?

lucafanselau avatar Jul 28 '22 15:07 lucafanselau

@lucafanselau I found my way to this issue because I'm having the same problem described above. Would it be possible, without causing a major refactor, to still have those characters escaped even if you set syntaxHighlight to false? If not, is there a straightforward way to include that custom rehype-escape plugin in the rehype plugin array of the astro config?

andy-stewart-design avatar Aug 02 '22 13:08 andy-stewart-design

This looks like a duplicate of https://github.com/withastro/astro/issues/3916 which was fixed! Could you try updating to astro@^1.0.0-rc.3? Looks like the original reproduction is working with the latest version: https://stackblitz.com/edit/github-4oojmj-6eamlx?file=package.json

delucis avatar Aug 02 '22 13:08 delucis