I just spent the last hour trying to get the Prism Code highlight to work on the Mercury theme, and was stuck on the code displaying as one long line with a horizontal scroll, as opposed to including the line breaks from the copied code. I had no issues with the Block Editor, but the WYSIWYG Editor had the horizontal scroll issue.
I then tried the following steps:
- Paste your code as is in the editor
- Highlight the code and select “Pre” from the 2nd dropdown on the 2nd row of the Post Editor.
- With the code still highlighted, select “Line numbers < pre >” from the 1st dropdown on the 2nd row of the Post Editor.
- With the code still highlighted, select “Code” from the 2nd dropdown on the 2nd row of the Post Editor.
- With the code still highlighted, select “Code-[LANGUAGE]” from the 1st dropdown on the 2nd row of the Post Editor.
This helped with eliminating the horizontal scroll, but clicking on “Copy” only copied the first line of code…
It appears that when a code reference is added to the WYSIWYG Editor, it creates separate < code > elements for each line inside the < pre >, and when you try to place all the code in the same < code > element, the line breaks aren’t generated properly (even if you manually add < br > elements).
Doc reference: https://getpublii.com/docs/highlight-your-code-syntax-with-prism-js.html
