How To Add A Code Editor To Your Blogger Website

In this article, I will show you how you can add a code editor to your Blogger website.

You can embed a code editor into your website and the user can write codes in that given box. Let’s check How you can do that.

First of All, you need to add the below HTML, CSS & Javascript code in the HTML View of the Blog post or page in Blogger.

<h3 class="question">Write a Program to calculate Two Number</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>

And then you can change the question in the h3 tag added at the top and change the theme of the code editor and the supported language.

This is what the code editor Looks like.

You can change the theme of the code editor and supported language. Here, the cobalt theme and Javascript language are selected.

theme: "ace/theme/cobalt",
  mode: "ace/mode/javascript",

Some supported themes

• dracula
• dawn
• eclipse
• cobalt
• clouds_midnight
• ambiance
• chaos
• chrome
• cloud9_day

You can change the language of the editor Like

• Javascript
• CSS
• HTML

If you want to display code to your visitors then in that case you need a code box on your website. That is what I have shown in the below video.

If you have any doubts regarding this you can ask me in the comment section.

Read Also: How to Add responsive HTML Table in Blogger & WordPress