Grav-plugin-prism-highlight - Line wrapping?

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

Does this help you out … ?

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

Thanks @spamhater -

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

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?

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

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;


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.



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”:


  • 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.