Skip to content

Prism <code> class is wrong? #1872

@distantcompany

Description

@distantcompany

I'm new to both Stackedit and Prism, but this doesn't seem right to me.

I have several json code blocks in my content. Example:

```json
    {
    	"foo": "bar",
    	"email": "[email protected]",
    	"hello": "world",
    }
 ``

(*third tick omitted to prevent github from interpreting the code block...)

I've included Prism into my template via CDN:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-json.min.js"></script>

Stackedit keeps outputting this:

<pre class=" language-json"><code class="prism language-json">

Prism isn't picking this up. But if remove prism from that code class attribute, it kicks in and works as expected. Or I can just remove the last letter (ex. pris)...anything to get the explicit value of prism out of there does the trick.

What am I missing here? I'm guessing that's not proper Prism syntax? If not, why is Stackedit putting that there? Am I causing this somehow in my config?

For now, I'm working around it with:

<script>
  document.querySelectorAll('[class*="prism"]').forEach(element => {
    element.classList.remove('prism');
  });
</script>

...and that works fine. But curious if I should have to do this.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions