Skip to content

Prism syntax highlighting adding is:raw in generated HTML #13400

Open
@julien-deramond

Description

@julien-deramond

Astro Info

Astro                    v5.4.3
Node                     v18.20.3
System                   Linux (x64)
Package Manager          unknown
Output                   static
Adapter                  none
Integrations             @astrojs/mdx
                         @astrojs/preact

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

Please note that this issue was first briefly discussed on Discord from https://discord.com/channels/830184174198718474/830184175176122389/1348365701953618112

I noticed that is:raw appears in some generated HTML files from a Hugo -> Astro migration branch available at twbs/bootstrap#41251 after running astro build.

This is:raw was spotted on my side because vnu-jar validator flagged it as an invalid element.
As a workaround, I silenced those messages.

Back to the problem, it's difficult to analyze in this large branch, so I've reproduced the use case in https://stackblitz.com/edit/github-tihmiajb-taqbsrvm?file=src%2Fpages%2Findex.mdx.

Simply adding the following configuration

markdown: {
   syntaxHighlight: 'prism',
},

and using the triple backticks in the main MDX file with some code allows you to reproduce the issue after running npm run build in StackBlitz.

In dist/index.html, we can see this, for instance:

<pre class="language-plaintext" data-language="plaintext"><code is:raw class="language-plaintext">markdown: {
  syntaxHighlight: &#39;prism&#39;,
},
</code></pre>

Please note that a similar issue might have been there in the past and was probably fixed by https://github.com/withastro/astro/pull/8715/files.

We could probably apply the same patch for

`<pre class="${classLanguage}" data-language="${language}"><code is:raw class="${classLanguage}">${html}</code></pre>`,
, but some Astro members in the Discord discussion rather suggested to try to fix the underlying issue too.

What's the expected result?

The expected result is that is:raw should never appear in the generated HTML.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-tihmiajb-taqbsrvm?file=src%2Fpages%2Findex.mdx

Participation

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    - P2: nice to haveNot breaking anything but nice to have (priority)feat: markdownRelated to Markdown (scope)

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions