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 15 replies - 1 through 15 (of 25 total)
  • Plugin Author Andi Dittrich

    (@andi-dittrich)

    the single line appearance is intended by design but you can enforce a minimal height: https://github.com/EnlighterJS/documentation/blob/master/Tweaks.md#set-minimal-height-for-single-line-codeblocks

    regarding the second issue: it’s caused by a css fix/workaround to keep empty line rendered. at the moment i didn’t see any possibilities to change it

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

    Thanks Adjusting the height did the trick for me.

    For Second Issue – Not Major for now. I will see if i can find some fix myself.

    I also tried to change the Icons with Text using below code as i am using Enlighter theme but When i hover over the code it still displays the icons instead of text. Am i missing anything. This is the code i am using.

    .enlighter-t-enlighter{
    .enlighter-btn-raw{
    &::after{
    content: ‘Raw’;
    }
    }

    .enlighter-btn-window{
    &::after{
    content: ‘Extern’;
    }
    }

    .enlighter-btn-copy{
    &::after{
    content: ‘Copy’;
    }
    }

    }

    Plugin Author Andi Dittrich

    (@andi-dittrich)

    you’ve also to override the hover pseudo class or enforce the styles via !important

    Still the same. Is it not the correct code. I am using !important now.

    .enlighter-t-enlighter{
    .enlighter-btn-raw{
    &::after{
    content: ‘Raw’ !important;
    }
    }

    .enlighter-btn-window{
    &::after{
    content: ‘Extern’ !important;
    }
    }

    .enlighter-btn-copy{
    &::after{
    content: ‘Copy’ !important;
    }
    }

    }

    Plugin Author Andi Dittrich

    (@andi-dittrich)

    then override the hover styles. take a look into the theme css files for examples

    btw: don’t forget to reset the background images of the icons!

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

    Which one ?

    .enlighter-t-wpcustom .enlighter-btn:hover{
    border-color: #c9c9c9;
    }
    .enlighter-t-wpcustom .enlighter-btn:after{
    content: ”;
    }
    .enlighter-t-wpcustom.enlighter-hover.enlighter-linenumbers div.enlighter>div:hover{
    color: #444;
    background-color: #fffcd3;
    }
    .enlighter-t-wpcustom.enlighter-hover div.enlighter>div:hover{
    color: #444;
    background-color: #fffcd3;
    }

    Plugin Author Andi Dittrich

    (@andi-dittrich)

    I am glad to say that its working. But not with the exact code, i had to modify to make it work. Thanks for your prompt response. I am using many plugins and support from the other plugins as well. i can say your response is always the fastest so far. Amazing !!

    The alignment of the Top Tool bar should be outside the box. Is that possible. right now it shows inside the box: https://imgur.com/J3Z8pmK. I have seen the same in bootstrap4 which shows the code outside the box but i am using enligher as base theme.

    Plugin Author Andi Dittrich

    (@andi-dittrich)

    could you post your code (just for interest)

    theoretically you can move it outside of the box by applying a negative margin/padding. but it also requires some modification of the container overflow settings.
    the bootstrap4 theme doesn’t have the buttons outside – it’s just a padding applied to the wrapper of the code container

    .enlighter-default .enlighter-toolbar .enlighter-btn {
    background-image: none;
    padding: 1px 2px 2px 4px;
    width: auto;
    height: auto;
    }

    .enlighter-default .enlighter-toolbar .enlighter-btn-raw:after {

    content: ‘Raw’;
    }

    .enlighter-default .enlighter-toolbar .enlighter-btn-copy:after {
    content: ‘Copy’;
    }

    .enlighter-default .enlighter-toolbar .enlighter-btn-window:after {
    content: ‘Window’;
    }

    Negative Padding did not work for me as the overflow is not set i believe as you said.
    Where can i set the container overflow to true.

    Plugin Author Andi Dittrich

    (@andi-dittrich)

    sry but i didn’t have the time to provide ready-to-use-examples.
    you’ve to take a look into the EnlighterJS DOM structure as well as the less sources: https://github.com/EnlighterJS/EnlighterJS/tree/master/src/themes

    base styles (overflow) can be found here: https://github.com/EnlighterJS/EnlighterJS/blob/master/src/themes/core/base.less

    Will try that for sure Thanks.

    I have seen this someone asked this question in this forum earlier but could not get the answer for this. Is there any way to set the default language to PowerShell. 99 % of the time i write using this language and every time i have to use the drop down to change from Generic Highlighting to Powershell. Could save a lot of my time for sure.

    Plugin Author Andi Dittrich

    (@andi-dittrich)

    you’ve to change the order of the language list via the filters (see docs)

    Thanks I added below code for modifying the language list using the link. But does not working. Am i missing anything ?

    https://github.com/EnlighterJS/documentation/blob/master/wordpress/FilterHooks.md

    • This reply was modified 2 months, 3 weeks ago by makhijajatin.
Viewing 15 replies - 1 through 15 (of 25 total)
  • You must be logged in to reply to this topic.