Multiple Programming Languages In a Single Editor

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 1 year, 10 months ago by Mishwani.

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

Thank you so much! ????

Hello again!

Yesterday I’ve almost got the issue solved because of your help, but there are still a few minor issues coming up. ??

The issue is with the Horizontal Scroll. It works very well on mobile devices, and on Desktop, it is not scrolling to the right completely. The statement or comment is long enough, but it only scrolls to the right a bit, as you can check in the image below.

I’ve added the below code as Custom CSS, but it didn’t work the way it should. Instead, in the Plugin settings, there is an option in the Appearance Menu, “text-overflow;” I’ve selected the “Add Scrollbar” option, and it’s working fine but still showing some issues. ??

// enable horizontal scroll
EnlighterJS.enlight(myElement, {
    textOverflow: 'scroll'
})

You can check the issue on this Page: https://techabu.co/ict/fcfs-preemptive-scheduling-c-program-example/

the “code” is javascript and wont work as css… the wordpress plugin takes care of it and provides the option “text-overflow” (horizontal)

i’m sorry but it looks like a theme/css issue …try it in a “clean” wordpress environment and it should work as expected. i didn’t have the time to debug third party issues

Hello! I’ve added some custom CSS and fixed that issue. I was just wondering where I can change the “Copy” button label to “Copy code”?

it’s not possible via the CE version of WordPress Enlighter plugin. it can be set in the pro/enterprise editions or via custom js code

Hello! I’ve used the code that you provided to trim long code. But now, the issue is the horizontal scroll bar doesn’t appear until we scroll to the end, as you can see in the below image:

Please provide me with some CSS code to fix this or guide me to find a solution to this minor issue.

You can find the long code and the issue on this page: https://techabu.co/ict/fcfs-preemptive-scheduling-c-program-example/

take a look into the enlighter-collapse class. i didn’t have time to provide custom solutions sry

@andi-dittrich I understand you’ll be too busy, but I don’t think it’ll take much of your time. The issue is general, and if someone else using this plugin added the vertical scroll, they might face the same problem and ask you. And I think you can solve this minor issue within a few minutes because you’re the developer of this plugin. It needs a few lines of CSS code, but I can’t do this since I’m not a CSS expert.

Just like you’ve provided code to trim long code and add a vertical scrollbar in the same way if you can give us CSS code that will show the horizontal scrollbar? So users don’t have to scroll to the end of the code to see the horizontal code.

Please take a few minutes and look into this. And @andi-dittrich, it’s a request if you are not providing the CSS code. Don’t approve this comment.

Thank you in advance! ??