⇦ Back

WDX-180

Web Development X

Let’s test some interactive code playground!

3 simple steps to enable a Flems live code playground after each code block:

1) Define a coding area using a fenced code block

2) Add a button, directly below the fenced code block using an #flems-enable HREF as shown in the example below:

```js
const a = 42;
const b = 2;
console.log( a * b );
```

[&#9658; Live coding](#flems-enable)

3) Include the following content in the Markdown Frontmatter:

---
load_script_js_via_src:
  - flems/flems.html
  - flems/flems_init.js
---

You are good to go!

Supported languages (at this point): js and html.

Live Example:

const a = 42;
const b = 2;
console.log( a * b );

Live Example #2:

console.log(Math.random());

Live Example #3: HTML, CSS and JavaScript

<div>
  <h2>Heading 2</h2>
  <p>Paragraph</p>
</div>

* { outline: 2px solid red;}

  console.log('Hello JS!');

Project maintained by in-tech-gration Hosted on GitHub Pages — Theme by mattgraham