If you're using a bundler like Webpack/Rollup, you simply run npm install --save codeflask and then import it into your JS file.

If however you want to run it directly into an HTML file, without bundlers, you can do as in this minimal example:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>CodeFlask Sample</title>
  <style>
    body {
      font-family: Arial;
      margin: 50px;
    }
    .code {
      position: relative;
      width: 500px;
      height: 200px;
      border: 2px solid #ccc;
    }
  </style>
</head>
<body>
  <h1 id="header1">Code editor:</h1>

  <div class="code">// Feel free to play with the code. :)

function Hey(phrase) {
    phrase = phrase || "Hey";
    return console.log(phrase);
}</div>
  <script src="https://unpkg.com/codeflask/build/codeflask.min.js"></script>  
  <script>
    const flask = new CodeFlask('.code', {
      language: 'js'
    });
  </script>
</body>
</html>

Notice the CSS in the .code selector? CodeFlask expects your code container to always have position, width and height properties set, otherwise your code editor may not show properly. So never forget to set those properties in the element you will be loading CodeFlask into.

complete example #99

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions