Support » Plugin: Enlighter - Customizable Syntax Highlighter » Toolbar buttons not visible with Single Line Code

  • Hi Support,

    I am using this plugin to display the code on my site however I am having few issues. Let me know if you can help on below:

    > When there is a single line code and someone hover’s over the code the toolbar does not display properly: https://imgur.com/Bclvb7S you can see from this image. Can you please let me know if there is a way to fix this. Preferably want to display the toolbar outside the box for example: https://imgur.com/AICNtb4

    > When the code is multi-line code its wrapped in a single box which is fine. But the Second line starts from the left which is not aligned with the first Line. Example: https://imgur.com/RmIlHa5

    This is not a customization request just little adjustment to make the tool more usable. Any help will be appreciated.

Viewing 10 replies - 16 through 25 (of 25 total)
  • ***********
    // add a custom filter to modify the language list
    add_filter('enlighter_editor_languages', function($langs){
        // DEBUG: just display the dataset - uncomment the following line to debug issues
        // echo '<pre>', print_r($langs, true), '</pre>';
    
        unset($langs['PowerShell']);
        unset($langs['javascript']);
        return $langs;
    });
    *****************
    • This reply was modified 2 months, 3 weeks ago by makhijajatin.
    • This reply was modified 2 months, 3 weeks ago by makhijajatin.
    • This reply was modified 2 months, 3 weeks ago by makhijajatin.
    • This reply was modified 2 months, 3 weeks ago by makhijajatin.

    Applied this filter: FILTER::enlighter_editor_themes. How to make it work.

    • This reply was modified 2 months, 3 weeks ago by makhijajatin.

    I managed to get it to work and its displaying the Powershell language to the top now but it does not load until switched from another drop down language back to Powershell, then it works. By default it shows as Unknown Language. Is there any way to fix this.
    Also it works fine when using Classic Editor but displays the language as generic though.

    • This reply was modified 2 months, 3 weeks ago by makhijajatin.
    • This reply was modified 2 months, 3 weeks ago by makhijajatin.
    Plugin Author Andi Dittrich

    (@andi-dittrich)

    i’m able to reproduce the issue…it’s a problem related to the Gutenberg editor plugin sry 🙁

    Hi Andi, Thanks i do no have Gutenberg editor plugin installed on my site its just the block editor i am using. Anyway i will keep using classic editor if this does not work even with block editor.

    If you remember you talked about Overflow Property. I tried to use that to move the toolbar out of the block but i got as far as https://imgur.com/1WnALLm. As you can see the Tool bar is pushing inside the box if i change the position and not over the top of the box / overlay the box. I tried adjusting the toolbar with below code. Anything you can suggest to fix this ?

    .enlighter-toolbar {
        display: none;
        position: absolute;
        right: 10px;
        top: -10px;
        overflow-x: overlay;
        overflow-wrap: anywhere;
        z-index: 10;
    }
    Plugin Author Andi Dittrich

    (@andi-dittrich)

    remove the overflow:hidden from enlighter-default(outer container)

    Perfect Thanks. One last thing left to do for me to align the long line code which wraps in a second line but second line starts from the left which does not get align with first line: https://imgur.com/VlBYI9z. But when you click on Raw Button, the text aligns beautifully.
    Not sure, i think you said its not possible to fix this ?

    Plugin Author Andi Dittrich

    (@andi-dittrich)

    it’s possible but it requires larger changes to the layout …

    Ok, No Problem. I thought it can be done via CSS but i guess not. So its fine.

    Plugin Author Andi Dittrich

    (@andi-dittrich)

    it’s just css 😉

Viewing 10 replies - 16 through 25 (of 25 total)
  • You must be logged in to reply to this topic.