run code (and tests) for tutorials

[hatemhosny]

This is a great project. Thank you for making that available.

I have a suggestion that is probably related to these issues: #302 and #197

I'm the author of LiveCodes, a feature-rich, open-source, client-side, code playground that supports 90+ languages and frameworks. The announcement post gives a general overview and you can find here what makes LiveCodes different.

Check starter templates: https://livecodes.io/?new

LiveCodes is a client-side app, with no backend. All processing (including compilation, code formatting, running tests and automatic loading of modules and types) occurs in the browser. This allows LiveCodes to be totally free for unlimited usage with no account required. It also allows self-hosting on any static file server.

There is a test runner (using Jest), also in the browser. Demo: https://livecodes.io/?template=jest-react

Projects can be shared, exported (e.g. GitHub gist) and deployed (to GitHub Pages).

LiveCodes is very configurable, and allows multiple display modes.

Playgrounds can be embedded in any webpage, using a powerful, yet easy-to-use, SDK.

This is an example for an embedded playground:

import { createPlayground, type EmbedOptions } from "livecodes";

const options: EmbedOptions = {
  config: {
    mode: "simple",
    layout: "vertical",
    activeEditor: "script",
    editor: "monaco",
    tools: {
      status: "none",
    },
    script: {
      language: "jsx",
      content:
        "import { atom, useAtom } from 'jotai';\n\nconst countAtom = atom(0);\n\nconst Counter = () => {\n  const [count, setCount] = useAtom(countAtom);\n  const inc = () => setCount((c) => c + 1);\n  return (\n    <>\n      {count} <button onClick={inc}>+1</button>\n    </>\n  );\n};\n\nconst App = () => (\n  <div className=\"App\">\n    <h1>Hello Jotai</h1>\n    <h2>Enjoy coding!</h2>\n    <Counter />\n  </div>\n);\n\nexport default App;\n",
    },
    style: {
      language: "css",
      content: ".App {\n font-family: sans-serif;\n text-align: center;\n}\n",
    },
  },
};
createPlayground("#container", options);

The SDK is also available for react, vue and svelte.

There is even a headless mode, which allows full control over UI.

In addition, the SDK allows communication with the embedded playgrounds using multiple methods (e.g. set/get code or config, watch for code change or console output, run tests and get results, etc)

This allows making interactive tutorials. See the blog post: Let's Make an Interactive Coding Tutorial

LiveCodes is mobile friendly, has responsive (vertical vs horizontal) layout and supports multiple code editors: the powerful Monaco editor on desktop and the lighter-weight, touch-friendly codemirror6 on mobile. There are also light and dark modes.

I believe integration between Code Hike and LiveCodes can make a really powerful tutorials platform. This can be a separate project that allows an easy to use setup that features both. Maybe, something similar to TutorialKit (but different!).

If you (or somebody else) are interested to proceed with such integration I would be very happy to co-operate. Otherwise, obviuosly, please feel free to close this issue.

Thank you.