How to Add Code Editor in Blogger

 

Hi, to all in this article I am going to tell you all about how to add code editor in blogger website easily in just few minutes.

You can also embed code editor in to your blogger website and the user can write codes in that code editor box.

So, read the below provided steps carefully and completely to get clear understanding about adding code editor in your blogger website easily wiothout any issue.

Some supported themes for this code editor

• Eclipse
• Medium UI
• Cobalt
• Chrome
• etc..

You can also modify the given code i.e. HTML, CSS and JavaScript based on your requirement and website responsiveness.

Steps to Add Code Editor in Blogger

Login to Blogger Website

First of all you need to visit official blogger website dashboard.

Now you need to login to blogger website dashboard by using your login credentials safely.

Backup Blogger Theme

After you login to blogger website dashboard, now you need to backup your blogger theme, if you get any error while saving the code, then you can restore your backup code again and can run your website as usual and you can follow below path to backup your website theme.

Path: Blogger website dashboard -> Click on theme section -> Click on arrow icon -> Click on backup -> Click on download -> Verify captcha -> Download the fie in a safe place for future use.

Here I am going to tell you how to add code editor in post/pages in blogger website.

Adding Code

• Open or Create post or page. 

• Now you need to click on pencil icon and change the view from Compose to HTML. 

• Now you need to copy below provided HTML, CSS and JavaScript code. 

• Paste the copied code in the post or page. 

• Now click on publish or update.

<h3 class="question"></h3>

    <div class="editor-container">
      <div id="editor">// Start Writing Codes Here</div>
    </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.5.3/ace.js"></script>

<script>
let editor = document.querySelector("#editor");
ace.edit(editor, {
  theme: "ace/theme/cobalt",
  mode: "ace/mode/javascript",
});
</script>

<style>
  h3.question {
  font-family: system-ui;
  font-size: 24px;
  text-align: center;
  font-weight: 100;
}

.editor-container {
  width: 100%;
  height: 540px;
  margin: 20px auto;
  position: relative;
}

#editor {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  font-size: 20px;
}
</style>
    

Here you can change the theme of the code editor and also you can change the supported language. Here, the cobalt theme and JavaScript language are selected and you can also select others too.

theme: "ace/theme/cobalt" 

mode: "ace/mode/javascript"

Demo

Practice you Handson Here

Conclusion

I hope that you all understood about adding code editor in your blogger website dashboard by using HTML, CSS and JavaScript easily without any issue.