HTML/CSS - How to import one code in another Online Editor and JavaScript Compiler

html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
    <title>Code merging tutorial</title>
  </head>
  <body>
    <div id="switcher">
      <button onclick=switchLang(this)>lang: en</button>
    </div>
    <div class="en">
      <header>
        <h1>Importing one code into another</h1>
        <span class="emoji-1">🤔</span>
      </header>
      <section>
        <p>Often, users, when learning web programming, are faced with the problem of reusing their own codes without copying of hundreds of program lines.</p>
        <p>Up to this point I have not met brave souls who could find a way out of this situation. So I decided to make my method for inserting one code into another.</p>
      </section>
      <section>
        <h2>Is it even possible?</h2>
        <p>Yes! Moreover, this mechanism is not difficult to understand, because all the additional code takes less than 400 bytes!</p>
        <pre><code>// method for embedding code at url
// callback is called after loading
function requireCode(url, callback) {
  // there is quite a bit of code
}</code></pre>
      </section>

css

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body {
    margin: 0;
    font-family: "Open Sans";
}
#switcher {
    position: absolute;
    top: 5px;
    right: 5px;
}
#switcher > button {
    border: 1px solid  silver;
    border-radius: 2px;
    background-color:  #7773;
    color:  #333;
}
.ru {
    display: none;
}
header {
    padding: 20px 20px 20px 10px;
    border-bottom: 1px solid  #333;
    background-color:  #8ff8;

BROWSER

Console