Setup/architecture suggestions for embedding Live Components in Markdown files


Currently I am working on a project trying to create interactive mathematics learning material. More concrete this means having a structured text (markdown) interleaved with (blocks of) exercises. These exercises are of similar nature and contain: text (markdown), an answer field (, a submit button and a feedback element shown after answering.

‘Playing’ a single exercise works fairly well (see image).

However, embedding these in markdown is very tricky. The current setup is as follows: In a Python script I translate a markdown string with the full page content and embedded exercises to a .leex template loaded at the server. The exercise files are first generated separately and injected in to the teplate using the Snippets plugin from PyMdown. By using tags the Python markdown extension leaves the raw-html.

Some problems with this setup:

  • User generated .leex should not be trusted.
  • I must download the .leex file to the server before I can serve it, .leex templates cannot be created inline (e.g. from a string returned by an API call)?
  • It feels bad to do Elixir code templating/generation from Python, this is horrible to debug.

Any suggestions for improving this setup?

question = “”"

Classifying Hand Written Digits

Explanation blah blah…

–8<-- “exercise_1.html”

How can we train a model to automatically classify such a digit image?

Some more text…

–8<-- “exercise_2.html”


exercise_1 = “”"

Exercise 1: Classify the image below


<%= live_component @socket, QuestionsWeb.ExerciseInteraction, status: :status, feedback: :feedback, id: 1 %>