Are there any best practices for database storage of text with rich elements like images, code blocks and such?

The Problem

I'm currently working on an application that allows the user to create "questions" which will then be rendered in another application.

These questions should be able to support several "rich" elements, like bold, italics, lists of elements, inline code, code blocks, equations, blocks of equations, images, audio, video, anything you could think of.

An example is shown below (this is a dummy example, just to show the placing of the elements):

---

Question 1:

Suppose you have to develop a business application. The main business entities for the application are shown below:

• Client
• Account

An account interest rate is calculated by x = x * (1 + i)^n (I would like this to be displayed with LaTeX, MathJax, or something similar).

One of the software engineers in your team proposes the following architecture for the system:

and gives you a sample implementation of one of the classes:

class Client:
    # code

and so on...

---

I need to store this text in a database (currently we're using a relational database, but we could move this to a NoSQL database if it makes things easier).

My Question

How should this be stored in a database? Are there any best practices for handling these types of use cases?

I was reluctant to use HTML tags directly because I felt it causes a lot of coupling between the text representation of the question stored in the database and the visualization technology used to display it, so we tried to define some placeholders in the question statement, something like:

".. proposes the following architecture for the system:\n {image=(position=1, height=400, width=700)}"

And then use some kind of Presenter object that takes the data representation and parses it to the format required by the visualization technology. The placeholder would contain the relative position of the image in the question (since there can be multiple images), the width and the height of the image.

However, this is quickly getting out of hand, and dealing with the other cases like code blocks, audio, video, bold, italics, and everything else using this placeholder strategy is becoming really complicated.

I'm just wondering if any of you guys know correct ways to handle this, or if you have any resources you could point me to.

Thanks in advance!