Grav-plugin-prism-highlight - Line wrapping?

[antineutrinos]

Hi all,

I’ve looked for a a code plugin with syntax highlight and copy button. cf Copy code to clipboard button - #5 by paulhibbitts

the one last thing I am missing is line-wrap that

trilbymedia/grav-plugin-prism-highlight

[spamhater]

Does this help you out … ?

How to make prism.js word-wrap and avoid the horizontal scrollbar (peterdaugaardrasmussen.com)

[antineutrinos]

Thanks @spamhater -

I changed path/user/plugins/prism-highlight/css/prism.css and modified

code[class*="language-"],
pre[class*="language-"] {
	color: black;
	background: none;
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	font-size: 1em;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-break: normal;
	/* word-wrap: normal; */
	word-wrap: break-word !important;
	line-height: 1.5;

	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;

	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

I checked browser dev tool and it comes back properly, but doesn’t change it on the screen.
Some other file must be taking precedence.

Any idea which one?

[spamhater]

is the site live ? can I look at the page your looking at and see what you are visual trying to accomplish please.

https://github.com/PrismJS/prism/issues/1237

Is it frontend or backend the issue occurs ? 

maybe to force the css to overwrite be a priority use the !important 

so based on your code provided 

code[class*="language-"], pre[class*="language-"]  !important; { 
white-space: normal !important;
word-break: break-word !important;

}

https://twig-extensions.readthedocs.io/en/latest/text.html#installation

Perlkonig/grav-plugin-twig-extensions

https://www.perlkonig.com/demos/twig-extensions

Or if you are using twig and wanting to alter the display

‘split - Documentation - Twig - The flexible, fast, and secure PHP template engine’

Sorry all this is looking at a problem whilst blind, there is no real visualization or what / how you are expecting it to work. Maybe do a screen capture or screen video of the issue and what you are expecting.

Maybe with more info and what you are trying to replicate, I can try and recreate it and see what possibilities there are. With prism seeming to in reduced support and conflicts on some of the updates, it may not be possible.

[pamtbaau]

@antineutrinos

To test a solution to fix line-wrapping in prism, I’m using a PHP code snippet leading to the following result:

When Googling on “prism line wrap”:

• The first hit points to How to make prism.js word-wrap and avoid the horizontal scrollbar. Which is also mentioned above.
  However, when you try it, you’ll see it wraps all lines into one.
  

• The second hit points to Enable Line Break · Issue #1237 · PrismJS/prism · GitHub, where a reply suggests to use white-space: pre-wrap.
  Adding only that to ‘user/plugins/prism-highlight/css/prism.css/’ seems to provide a better solution for line-wrapping.

  code[class*="language-"],
  pre[class*="language-"] {
    white-space: pre-wrap !important;
    ...
  

  

Note:

• By the way, this hasn’t got much to do with Prism, but with <pre> and <code>in general. Using white-space: pre-wrap will make these wrap.
• Please be advised that adding code the plugin itself isn’t a very good idea. When a new version of the plugin is released and installed, all changes will be lost.