How To Add Syntax Highlighter Code Box With Copy Button In Blogger or Wordpress Website.

What are Syntax Highlighter? And How to add Syntax Highlighter in Blogger or Wordpress Website?

Usual Questions

Do These Questions also come in your Mind about Syntax highlighter Codebox?

Do you know what is Syntax highlighter?
Why add Syntax highlighter to blog post?
How to add Syntax highlighter to blogger post?
How to add Syntax highlighter to Wordpress post?
How to Add Syntax Highlighter Code Box with Copy Button?

data:post.title

How to add syntax highlighter in WordPress, Blogger or Custom Website?

People who write code on their blog or their website i.e. share the information related to coding then they install a plugin to highlight the coding which is available only in WordPress but now this feature in blogger and custom blog also Available which you have to use through this code highlighter.

There are many plugins available for the WordPress platform, but there are many plugins that have not been updated for years, due to which such plugins are not supported in the new WordPress version and some plugins have started showing errors, due to which the user experience is getting worse. Is.

If you also write code in your blog or website then you should use custom plugin which will also load faster and there will be no chances of error. So let's know how to use code highlighter i.e. syntax highlighter in WordPress, Blogger and custom website?

How to use syntax highlighter in WordPress?

Crayon Syntax Highlighter plugin is not working in latest version 5.2 of WordPress which is why most of the users are trying to uninstall it and search for another plugin. If you are also one of them then this post is especially for you. In this I will tell you how to add syntax highlighter in WordPress, which will be completely lightweight, i.e. it will load faster, with no particular effect on the speed of the blog.

Follow the steps given below to add custom syntax highlighter to WordPress blog?

Step 1: First of all open WordPress Dashboard and then click on Theme Editor in Appearance menu.

Step 2: After that click on the header.php page in the right side and copy and paste the CDN given below in that page. It has to be pasted just below the <head> tag. In the CDN, you will find a file of CSS and JavaScript, in which the codes for using Syntax highlighter are given. Here I am telling about Prism syntax highlighter which is the fastest and easiest.

Step 3: Update file later but click to save the file.

Step 4: Now whatever post you want to write, write the post and where you want to put the code, enter the code using the code option from the given option of wordpress and after entering the code in the block setting given on the right side. Add your code language in the box with additional CSS, e.g. if you are adding CSS code, you will need to type language-css in the Additional CSS box.

Step 5: Now publish your post and after that you can see whether the code entered in your post is colored or not. If it is not colorful then you will have to re-enter the code properly.

Blogger is one of the best platforms from Google that provides free subdomains to its users with free hosting of websites. You do not need to pay a single amount to make your blog (website) on Google Blogger. It gives you many default themes and options to make your blog (website) look professional and beautiful. Apart from this, you can also apply your own developed or purchased themes.

Every new blogger starts his new journey as blogger. Many people are using Blogger instead of many other platforms like WordPress, Wix etc.


Of course Blogger is free and that's probably why it has many limitations and you can't use any kind of external plug-ins in it like Wordpress and that's why sometimes new users like table or codebox highlighter plug-ins. Confused to set up.

But it is also not that you cannot use any external plugins in blogger website at all, of course, but for this you will have to follow this post and follow all the methods we have told one by one sequentially. Gotta do it!

Demo - Syntax Highlighter Code Box


$("#main-nav #s").blur(function() {
if (0 === this.value.length) this.value = c;
});
$("#main-nav #s").focus(function() {
if (this.value === c) this.value = "";
});

Copy Shortcode for Syntax highlighter Codebox

JAVA SCRIPT

<pre lang="js"><code>$("#main-nav #s").blur(function()...</code></pre>

CSS

<pre lang="css"><code>$("#main-nav #s").blur(function()...</code></pre>

HTML

<pre lang="html"><code>$("#main-nav #s").blur(function()...</code></pre>

Post a Comment

Previous Post Next Post
Letest
Loading...