Toolbar buttons not visible with Single Line Code

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 4 years, 4 months 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’;
}
}

}

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;
}
}

}

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 4 years, 4 months 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;
}

i’ve updated the docs: https://github.com/EnlighterJS/documentation/blob/master/Tweaks.md

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.

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.

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.

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 4 years, 4 months ago by JM.