[ PrismJS ] Syntax Highlighter Code Box For Blogger With Copy Button 2022
Today’s Article, I will show How To Add Syntax Highlighter Code Box With Copy For Blogger. This code box with Copy to Clipboard Button in blog post For <Pre> Content and code written by PrismJS. But Syntax Highlighter Code Box for blogger code are custom design by https://VipeBN.Blogspot.com. This design look like HelpBN.com pre code box.
Previous post i will tech you how to add Double Click to Select Pre Code For Blogger / How To Add Syntax Highlighter With Double Click Copy For Blogger and this process is almost same but this so much attractive and beautiful with syntax highlighted pre code box with Copy To Clipboard Button and also added Line Highlight, Show Languages etc.
We have seen many blog sites on the internet where, they are showing any text or Pre Content / Pre Code in the form of Syntax Highlight. We know that some Blogger Templates have this design but most templates do not have Syntax Highlighter With Copy Button. It has to be added in a custom way.
So in today’s post we have made it very easy on your blogger site How To Add Syntax Highlighter Code Box With Copy Button / Syntax Highlighter In Blogger Blog Post With Copy To Clipboard. So, let’s start the topic ….
Why Use Syntax Highlighter Code Box With Copy For Blogger
PrismJS is a lightweight and extensible syntax highlighter code box that can be used when working with code blocks in markdown box in blog posts.
PrismJS Syntax highlighting code box is one strategy to improve the readability and context of the text for your website visitors. Especially for pre content or pre code that spans several place in blog post. The reader can easily ignore large sections of pre code with highlighted language code name , that depending on what they are looking for in your post.
This Syntax Highlighter Code Box For Blogger Added Copy To Clipboard Button and all users can easily copy pre code with the single click of the Syntax Highlighter Code Box for blogger / code box with Copy to Clipboard Button.
Features Of PrismJS Syntax Highlighter Code Box
- Code syntax highlighted
- Line numbering
- Copy To Clipboard Button
- Show Languages of the code
- Inline colour code
- Dark Themes
- 4+ languages supported
- Allow plain text
- Highlight specific lines and/or line ranges
- And much, much more…!
How To Add PrismJS Syntax Highlighter Code Box With Copy For Blogger
With the blew <script> code and HTML Code You can easily add PrismJS Syntax Highlighter Code Box With Copy For Blogger. Blew are details :
- Go To Blogger Dashboard
- Click Themes
- Now Click Edite HTML
- Now Find the template <head> section and paste blew code after <head> section.
<link href='https://cdn.jsdelivr.net/gh/dxsohel/blogger@main/blogbn-code-copy.css' rel='stylesheet'/>
- Then Find <body> tag and Paste blew code above <body> tag. [ You can Add It your template <head> section ]
- Now Save Theme
How To Use Code Box With Copy Button In Blogger Blog Post
- Go To Blogger Dashboard
- Click Create New Post or click Edit on an existing post.
- Add a post title write your post content
- Add the post content, including the <Pre> code Box.
- Paste Blew Code Whare You want to add syntax highlighter Code Box With Copy Button.
- When you’re ready, click Publish.
For HTML Code Box Use The blew Code :
<pre class='language-html'><code> YOUR HTML CODE HERE </code></pre>
For CSS Code Box Use The blew Code :
<pre class='language-css'><code> YOUR CSS CODE HERE </code></pre>
<pre class='language-js'><code> YOUR PRE CODE HERE </code></pre>
Conclusion : Today’s post shows How To Add Syntax Highlighter Code Box With Copy For Blogger And Copy To Clipboard Button In Code Box. The previous post showed Double Click to Select Pre Code For Blogger / How To Add Syntax Highlighter With Double Click Copy For Blogger.
If there is any problem to do the mentioned ways, let us know by commenting below or contact us. We will try to give you a solution as soon as possible. Thanks For Read This Article.