PrismJS / prism

Lightweight, robust, elegant syntax highlighting.
https://prismjs.com
MIT License
12.24k stars 1.29k forks source link

Word Wrapping #1247

Closed scratchyone closed 6 years ago

scratchyone commented 6 years ago

I'm using prism on my site, but the text is not wrapping. It has a really long scroll bar. How can I fix this? Here is the site: scratchyone.com/view-source/

Golmote commented 6 years ago

Hi! You can change the wrapping behaviour in Prism by simply overriding the white-space CSS property on <pre> and <code> tags.

scratchyone commented 6 years ago

Thanks! I'll do that the next time I use prism.

On Jan 16, 2018 2:56 AM, "Golmote" notifications@github.com wrote:

Hi! You can change the wrapping behaviour in Prism by simply overriding the white-space CSS property on

 and  tags.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/PrismJS/prism/issues/1247#issuecomment-357880204, or mute the thread https://github.com/notifications/unsubscribe-auth/AK8oJftau21GMjTSeG-KOFUSWi3Ht70wks5tLFYVgaJpZM4Q-Tpt .

ayoubkhan558-zz commented 3 years ago

Add this CSS in your code. It will fix the issue

pre[class*="language-" ],
code[class*="language-"] {
    white-space: normal;
    overflow: auto;
    word-break: break-word;
}
Bhagwanta1997 commented 1 month ago

@ayoubkhan558-zz After adding the above css the line numbers are not aligning properly.