Archived topic
How Can we Make this in a Post
13 replies · Started by Sourabh on January 6, 2021
Hi,
Refer image snap and a URL in the private section and guide how to make this section within a post ??
Regds:
Hi there,
you would add the HTML to your post using a HTML Widget.
You won't require these two lines:
<!DOCTYPE html>
<!-- Created By CodingNepal -->
The CSS you can add to a Hook Element > wp_head and set the Display Rules to the places you want it applied.
The CSS has to be wrapped in these tags:
<style>
/* Add the CSS here */
</style>
OKay i will try and update you..
You're welcome
Hi David, Seems I am making some mistake, refer the steps I am following -
Hook Created - WP_head - CSS with style tag - Display rules set to blog.
Now inserting HTML widget and pasting HTML code, however when I see a preview - then I see Code executing and getting code output, however, it's an article so want to share code, etc so don't need execution for myself.
I also don't get any border around code etc, and code copy buttons, etc...overall guide me again and correct my steps.
refer preview url in P-Section.
If you simply want to display the code in the article, then use a Code Block, any code you paste within will be formatted for users to copy.
Okay.. and where should I find this code block ?
Hi,
Okay.. and where should I find this code block ?
Code block is one of Gutenberg Editor's core blocks.
https://share.getcloudapp.com/nOuD2QOE
This article explains it briefly.
https://www.pair.com/support/kb/gutenberg-editor-formatting-code-in-wordpress-posts/
No, I tested it in a sample post but it's not looking as I am trying to achieve.
Refer P-Section, how it's looking (It's merely adding a background, nothing else, no copy button, no border nothing).
however, what I am trying to achieve is already shared in P-section.
The core code block doesn't have a copy function. There are some plugins that add a button or theres this one which just makes the block copied on click:
Tried and getting the copy button too, not the look, anyways leave it then - just last question how that man has done this in his website ???
I don't they may have custom coded that or used a plugin like this:
https://wordpress.org/plugins/copy-the-code/
Okay, Ignore then, Thanks a ton for your efforts...
You're welcome