[Support request] Code block Title

[Jatin]

Hi Guys,

I have just visited a website which was using a Code block and prism.js for showing code block. The site is using Generatepress.

I have provided a sample blog post of the site where the code block is being used.

Code Block contains a Title. How to add a title to the code block.

When i checked it in the site’s CSS its using something like below. How can i apply the same to my site please.

.prism-titlename {
    margin: -16px -16px 24px -16px;
    padding: 4px 16px;
    font-weight: bold;
    color: #333;
    background-color: #eee;
}

[Fernando]

Hi Jatin,

Try adding class code-block-title to the class list of the Heading Block, then add this in Appearance > Customize > Additional CSS:

.code-block-title {
    margin-bottom: -10px;
    padding: 8px 16px;
    font-weight: bold;
    color: #333;
    background-color: #eee;
}

[Jatin]

Added whats next ? How to add title ?
I am using Prism.js and same has been in use in the other site as well.

[Fernando]

Aren’t these the title for instance?: Powershell code to disable SSL 2.0

Can you try adding the class to those Heading Blocks if so?

[Jatin]

No Thats just Headlines, Please check the site which I sent as an example. How that site is doing it ?

[Fernando]

It’s most likely, added through the Code Editor manually. Example: https://share.getcloudapp.com/NQujpgZN

The alternative, if you don’t want to alter the code is to add a Heading before the Code Block and give it the class I mentioned.

Another Alternative would be to use GenerateBlocks Plugin for the titles – https://docs.generateblocks.com/article/headline-overview/

[Jatin]

Thanks

[Fernando]

You’re welcome Jatin!

[Author]

Posts