Multiple Programming Languages In a Single Editor

Abu Zar Mishwani
(@itsabuzarr)

2 years, 10 months ago

Hello,

I’ve been using this plugin since last year, and it’s mind-blowing. The only thing I’d recommend that will add more value to the plugin is that it should have the option to add multiple languages on a single Code Block. As you can see in the screenshot below:

One program has been written in multiple programming languages in the above screenshot. Instead of using different blocks, all are combined in a single Code Block and can be easily switched between other programming languages.

Please add this feature to the plugin!

Thanks!

The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 19 total)

1 2 →

Plugin Author Andi Dittrich
(@andi-dittrich)

2 years, 10 months ago

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
Thread Starter Abu Zar Mishwani
(@itsabuzarr)

2 years, 10 months ago
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 2 years, 10 months ago by Abu Zar Mishwani.
Plugin Author Andi Dittrich
(@andi-dittrich)

2 years, 10 months ago

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

Thread Starter Abu Zar Mishwani
(@itsabuzarr)

2 years, 10 months ago

Can you please send me the Documentation URL where you’ve guided about the Scroll Bar?

Plugin Author Andi Dittrich
(@andi-dittrich)

2 years, 10 months ago

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)
Thread Starter Abu Zar Mishwani
(@itsabuzarr)

2 years, 10 months ago
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! ❤️
Plugin Author Andi Dittrich
(@andi-dittrich)

2 years, 10 months ago

you should really take a look into related topics 😛

https://github.com/EnlighterJS/Plugin.WordPress/issues/331

Thread Starter Abu Zar Mishwani
(@itsabuzarr)

2 years, 10 months ago

Thank you so much! ❤️❤️
Thread Starter Abu Zar Mishwani
(@itsabuzarr)

2 years, 10 months ago
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/
Plugin Author Andi Dittrich
(@andi-dittrich)

2 years, 10 months ago

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

Thread Starter Abu Zar Mishwani
(@itsabuzarr)

2 years, 10 months ago

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

Plugin Author Andi Dittrich
(@andi-dittrich)

2 years, 10 months ago

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

Thread Starter Abu Zar Mishwani
(@itsabuzarr)

2 years, 10 months ago

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/

Plugin Author Andi Dittrich
(@andi-dittrich)

2 years, 10 months ago

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

Thread Starter Abu Zar Mishwani
(@itsabuzarr)

2 years, 10 months ago

@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! 😊

Viewing 15 replies - 1 through 15 (of 19 total)

1 2 →

The topic ‘Multiple Programming Languages In a Single Editor’ is closed to new replies.