Best way to display code snippets box on website or blogger?

Janak Kumar Shrestha
December 16, 2022
0

A guide to displaying code snippets box on your Blogger website using Prism.js.




Do you know the most effective way to display code snippet box correctly on Blogger's websites or any other webpage and make them look awesome? 

Code Box features include : 

  • Black background theme
  • Show Line Numbers
  •  Auto language detection
  •  Keyword highlighting
  •  Auto code formatting
  •  Normalize Whitespace
  • Copy to Clipboard Button
  • Matching braces with colors

Basics requirements to understand:

  1. HTML  (compulsory)
  2. CSS  (Optional)
  3. JavaScript  (Optional)

In this tutorial, I will show you the best ways to display code snippets box on Blogger's websites or any other webpage, using examples and I'll provide source code.


What is the purpose of displaying code snippets box on a web page?

You can display code snippets in HTML to share your programming knowledge with your audience.

If you write a code example guide on your blog or any web page.

To demonstrate parts of this code snippets in your web page with the proper format and styling. It will be necessary to present them that way.


Requirement to use code snippets box on your web page.

You just need javascript and CSS files from prism js. Do not worry about any files. All the code you need to add a code snippets box to your website is given below step by step. Just copy and paste. If you are a beginner, don't figure out PrismJS. Copy and paste the code below.

Note:- Before writing code inside <pre> or <code> tags. Your original code must be encoded.

The list of top encoder tools is:

Don't forget to encode the original code.


1. PrismJS css file:

Copy the code below by clicking the copy button. And paste it into your project. If you want custom CSS, see the official docs at PrismJS.com 


        <link href="https://cdn.jsdelivr.net/gh/janak0ff/codebox-for-web-page@master/prism.min.css" 
        rel="stylesheet"> </link>


2. PrismJS JavaScript file.

Copy the minified JS code below by clicking the copy button. And paste it into your project. If you want custom Javascript, see the official docs at PrismJS.com 


        <script src="https://cdn.jsdelivr.net/gh/janak0ff/codebox-for-web-page@master/prism.min.js"></script>


3. Html code contains <pre> and <code>.

NOTE: In the yellow highlighted area, you have to type the extensions of the language. For example txt for Plain text, py for python, java for java language, js for JavaScript, CSS for CSS, HTML for HTML Markup language, sass for sass, PHP for PHP. For more visit PrismJS.com

        <pre><code class="language-html line-numbers  match-braces rainbow-braces" data-prismjs-copy="Copy">
        {Place all type of language code right here. }
    </code></pre>


4. Final combined code html, css, and JavaScript.

Our final code looks like this. You can copy and paste directly into your projects. This is all about the project's resources. Html code (Need to encode).


       <html>
<head>
    <link href="https://cdn.jsdelivr.net/gh/janak0ff/codebox-for-web-page@master/prism.min.css" rel="stylesheet">
    </link>
    <title>Code box</title>
</head>
<body>

    <pre><code class="language-html line-numbers  match-braces rainbow-braces" data-prismjs-copy="Copy">
       { All your displaying code snippets on a web page }
   </code></pre>

    <script src="https://cdn.jsdelivr.net/gh/janak0ff/codebox-for-web-page@master/prism.min.js"></script>
</body>
</html>


5. Examples of different language.


Plane text (No need to encode):-
   
I’m JANAK! Currently attending JMC for a BCA program. My +2 was completed at Pentagon International College in the science stream (Physics).
A passionate self-taught Web developer with a couple of years' experience, I aim to become a Full Stack Developer and programmer. 
In my spare time, I blog and upload videos about various technologies. I began coding and frontend development as a hobby and have designed 
and implemented beautiful backend and frontend systems using different JavaScript frameworks. I enjoy designing and developing user interfaces,
testing, debugging, writing, learning, and discussing the latest technologies. I am also familiar with Debian Linux. I have experience of website
design, building, and customization, as well as WordPress knowledge. Learning new coding skills and researching relevant technical knowledge is a 
pleasure for me, as is creating simple, effective, and intuitive designs to solve complex problems.

Stay connected with us.
Java code (Need to encode):-

     class Solutionjaank{
    public static void main(String []argh){
        Scanner in = new Scanner(System.in);
        int t=in.nextInt();
        for(int i=0;i<t;i++){
            int a = in.nextInt();
            int b = in.nextInt();
            int n = in.nextInt();
            for(int j = 0; j < n; j++){
                a = a + (int)Math.pow(2,j)*b;
                System.out.print(a + " ");
            }
            System.out.println("");
        }
        in.close();
    }
}
Python code (Need to encode):-

  # Python program to find the sum of natural using recursive function
def recur_sum(n):
   if n <= 1:
       return n
   else:
       return n + recur_sum(n-1)
# change this value for a different result
num = 16
if num < 0:
   print("Enter a positive number")
else:
   print("The sum is",recur_sum(num))
JavaScript code (No need to encode):-

        person.getPersonInfo = function () {
            let skillsWithoutLastSkill = this.skills
              .slice(0, this.skills.length - 1)
              .join(', ')
            let lastSkill = this.skills.slice(this.skills.length - 1)[0]
          
            let skills = `${skillsWithoutLastSkill}, and ${lastSkill}`
            let fullName = this.getFullName()
            let statement = `${fullName} is a ${this.title}.\nHe lives in ${this.country}.\nHe teaches ${skills}.`
            return statement
          }
          console.log(person)
          console.log(person.getPersonInfo())
CSS code (No need to encode):- 

        .spikes {
            position: relative;
            background: #2c3e50;
            height: 50vh;
          }
          .spikes::after {
            content: '';
            position: absolute;
            right: 0;
            left: -0%;
            height: 50px;
            background-size: 50px 100%;
            background-image: linear-gradient(135deg, #2c3e50 25%, transparent 25%), linear-gradient(225deg, #2c3e50 25%, transparent 25%);
            background-position: 0 0;
          }

5. Steps to use code snippets box.


In this tutorial I'll show :

  1. In blogger's websites.
  2. In normal web pages or HTML pages


1. How to use code box on bloggers' websites?

Step 1: Copy the below code. 

        <pre><code class="language-html line-numbers  match-braces rainbow-braces" data-prismjs-copy="Copy">
        { your code to display on blogger }
      </code></pre>
   
       <link href="https://cdn.jsdelivr.net/gh/janak0ff/codebox-for-web-page@master/prism.min.css" rel="stylesheet">
       </link>
       <script src="https://cdn.jsdelivr.net/gh/janak0ff/codebox-for-web-page@master/prism.min.js"></script>
   

Step 2: Open you bloggers dashboard and click +NEW Post
Click Html view

Paste code here and publish you posts.




Final post looks like this.
2. How to use code box on normal web page or an HTML page?

Step 1: Open your HTML file and locate the code box you want to add. Paste the prismJS CSS file inside the head tag and the prismJS JavaScript file above the closing body tag </body> tag.

Step 2: Copy and paste this code into your HTML file.
Note: if you want remove line numbers in box, simply remove "line-numbers" class name.

        <pre><code class="language-html line-numbers  match-braces rainbow-braces" data-prismjs-copy="Copy">
        { your code to display on website }
      </code></pre>
Example:

Before:

After:



Conclusion:  

            Throughout this lesson, you have learned how to share code snippets on a blog or any website using PrismJS. Additionally, you learned about JS libraries you can use on your blog or website.  
           Now, what if you would like to share useful code snippets with your team or friends in a more modern and intelligent manner? So, thank you guys stay connected with us.


FAQs:
Simply, a code snippet is a block of code in various coding languages that you can use in your programming projects. By enabling developers to reuse code, code snippets are helpful for shortening the time it takes to create software, a website, or any coding project. 
It is easy to copy code from snippets and use it in your projects.
When working with code blocks in markdown files in blog posts, Prism is a compact, extensible syntax highlighter that can be used.
Tags
Share to other apps
Janak Kumar Shrestha

Janak Kumar Shrestha

A passionate self-taught web developer. In my spare time, I blog and upload videos about various technologies. I began coding and frontend development as a hobby and I enjoy designing and developing user interfaces, testing, debugging, writing, learning, and discussing the latest technologies.

You may like these posts

Show more

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
Post a Comment (0)

#buttons=(Accept !) #days=(20)

Our website uses cookies to enhance your experience. Learn More
Accept !
Top