Code Block Syntax Highlighter

[yubi]

Hi team,

Do you have a syntax highlighter feature with this theme? I want to change the code block with some syntax highlighting without using plugins.

Any help would be greatly appreciated.

Thanks

[Themonic-Support]

Hi,

No, you have to use a plugin for that.

To change base background color and styles of pre tag (code tag from blocks), use like the following in Customizer -> Additional CSS:

.entry-content pre {
    border: 1px solid #ededed;
    border-radius: 0;
    margin: 24px 0;
    background: #333333;
    padding: 24px;
    color: #ffffff;
}

You can modify as per your requirements.

[yubi]

Thank you for your quick response.

I want another help.

How to make code block compact. Currently, my code is not compact. It has lots of line breaks and spaces.

When I use language-css class from css in code tag like following:

<code class=”language-css”>
// My code here

The code displays nicely.

I have added that class manually doing inspect element.

Could you please help me to add that class to my code tag like I can override custom css?

Note: I don’t have the implemented CSS code for that class. If I can get the css code for that class that is also ok. Because I can add that css to my custom css file

Thank you

[Themonic-Support]

Try

.entry-content .language-css {
CSS here
}

in Customizer -> Additional CSS.

Regarding line break and blank spaces, if you are copying code, first copy and paste to notepad++ and then copy and paste to WordPress editor.

Please contact via support email for further support on this if needed.

[Author]

Posts