Code appears on top of Previewers popup when Twilight theme is used

[hoonweiting]

Information:

• Prism version: Current deployment on prismjs.com
• Plugins: Previewers
• Environment: Browser? I guess? But I think it's anywhere Previewers is used with Twilight. You can see it on https://prismjs.com/plugins/previewers/

Description
Using the Previewers plugin with the Twilight theme selected results in the code hovering on top of the preview popup (screenshot below). I have not really extensively tested this, I was just playing around on the Prism website and happened to notice it. Of the default themes, this only happens with the Twilight theme, the others are fine.

Example

Resolution
I opened DevTools and changed the z-index of .token to 0, and the problem was resolved.

prism/themes/prism-twilight.css

Lines 155 to 159 in d216e60

	/* Make the tokens sit above the line highlight so the colours don't look faded. */
	.token {
	position: relative;
	z-index: 1;
	}

Of course, seeing the note that the tokens were purposely assigned a z-index of 1 probably means that we shouldn't resolve it by simply changing it to 0. We can probably set a z-index for the popup instead, but I'm not sure what implications it would have down the line, especially for users who assign z-index to other things on their site.

I can help to resolve this, but I do want to be sure, because I've been lurking a bit and have seen a lot of mention of "backwards compatibility" and "breaking change" and a possible Prism V2 in future.

Cheers!

[RunDevelopment]

Thank you for reporting this.

I can help to resolve this

Thank you! I think the best way to fix this is to make sure that the popup is above the code. Giving the popup a z-index: 10 or similar when active should be enough. This gives themes a bit of room to do interesting stuff with z-index.

"backwards compatibility" and "breaking change"

I think fixing this little bug should be ok. Making sure that the Previewers popup is actually visible shouldn't cause anyone problems.