kazzkiq
commented
5 years ago 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.
Shubhamr837
I'd love to see a complete example of an HTML file that will use CodeFlask. The current documentation is so slim that I'm unable to figure out how to use it.