Enlighter Not Working – Syntax are coming as plain text

Hi @sarkarijobsdrive ,

the EnlighterJS initialization code is missing -> Enlighter -> Options -> Resources+CDN -> Initialization.

this issue can be caused by invalid settings or third party optimization/caching plugins.

did you tried to disable autooptimize and wp-super-cache temporary ?

Thanks, Andi I follow up ur mentioned steps and now its displaying and it looks ooosum. thanks for developing such an oosum plugin. but can you told me how to increase the width because I don’t want to put any margin, I have tried below code but

.entry-content ul {
margin-right: 5px;
margin-left: 5px;
margin-bottom: 0px;
}

but the above code breaks my blog structure for bullets also but I want to increase the highlighter area so that it will match with the body of the posts

please take a look into your websites sourcecode or the EnlighterJS theme sources: https://github.com/EnlighterJS/EnlighterJS/blob/v2-legacy/Source/Themes/Base.less
https://github.com/EnlighterJS/EnlighterJS/blob/v2-legacy/Source/Themes/Atomic.css

each highlighted element is wrapped into a container with the css class .EnlighterJSWrapper – as well as theme specific .atomicEnlighterJSWrapper. these selectors should be used to change specific styles without affecting other elements ??

I am using the Enlighter – Customizable Syntax Highlighter plugin with Genesis theme and in that, I am not able to find the plugin file to update so that it does not affect the theme UL style

you should NEVER alter any plugin files…just put some custom css rules into your theme: Appearance -> Customize -> Additional CSS

The Default size of syntax highlighter box is something like this pic Default Size of syntax highlighter [having more margin ] and when i double click on the syntax highlighter box i got this size box After doublick on syntax box [with low margin]

How can I set the default box size as the second image which is with low margin?

Note: Click on the link texts for the attached image for reference

• This reply was modified 5 years, 5 months ago by Manoj.
• This reply was modified 5 years, 5 months ago by Manoj.

Use chrome developer tools to inspect the element. i’m not sure why the first image shows margin. normally EnlighterJS doesn’t set any outer margins to the container.

maybe you can provide a link to the example page ?

I try to fix through chrome developer but it breaks the alignment of different posts, here is the test url link

you’re page styles are overriding the margin left/right values of the EnlighterJS container, just use the following css to enforce the margins:

ol.EnlighterJS, ul.EnlighterJS {
    margin: 0 0 20px 0 !important;
}

Thanks for such an oosum plugin and quick support