Archived topic
Code block Title
7 replies · Started by Jatin on October 13, 2022
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;
}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;
}Added whats next ? How to add title ?
I am using Prism.js and same has been in use in the other site as well.
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?
No Thats just Headlines, Please check the site which I sent as an example. How that site is doing it ?
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/
Thanks
You're welcome Jatin!
