The feature is already available since the initial EnlighterJS versions. It’s called “codegroup” – the detailed usage is described within the docs: https://github.com/EnlighterJS/documentation/blob/master/editing/TinyMCE.md
Ohh, Thank you! I’m glad it’s already there, but I’ve not found it. One more thing. Can I add a vertical and horizontal scroll bar, as some code might be too long? So, in that case, if it shows 40 lines of code, for example, and then for the other part of the code, the user can scroll. The same is the case for horizontal scroll because some comments are long, and on mobile devices, they’re cropped, and only half the comment shows to the user. Also, is there any way I can hide the line numbers only on mobile?
- This reply was modified 5 hours, 44 minutes ago by .
just read the docs 😉
regarding mobile optimization: in this case you should create a custom theme (see the docs for details) and add customized css media queries. in case you’re already familar with less-css you can use the EnlighterJS sources including the helper functions
Can you please send me the Documentation URL where you’ve guided about the Scroll Bar?
horizontal: https://github.com/EnlighterJS/documentation/blob/master/development/Options.md#textOverflow (via wp options)
vertical: https://github.com/EnlighterJS/documentation/blob/master/Tweaks.md#set-minimal-height-for-single-line-codeblocks (via custom css)
I’ve achieved the horizontal scroll by using the below custom CSS. However, I failed to get the vertical scroll. 😢 Please give me the CSS code to limit the lines that show vertically because some of my code has more than 150+ lines of code, which is too much, so if only 40 or 50 lines are displayed, and then if someone would like to continue, he could scroll.
@media only screen and (max-width: 767px) {
.enlighter-code,
.enlighter {
overflow: auto;
}
}Thanks in advance! ❤️
you should really take a look into related topics 😛
https://github.com/EnlighterJS/Plugin.WordPress/issues/331