Skip to main content

Interactivity

Highlights​

A key feature of Docusaurus is the support for .mdx files to make possible custom text highlights and React components. For improved highlighting in notes, simply use the import for BlueHighlight and GreenHighlight and use them in markdown. The convention for the notebook is to have BlueHighlight for key terms and GreenHighlight to call attention to details or parts of sentences that are important to understanding.

Here is a key term and here is something that helps with understanding the concept.

Quizzes​

With MDX you can generate a single reusable <Quiz> component that handles multiple questions in a compact and interactive way. You can then prompt the LLM:

Generate 5 multiple-choice questions at the end of the following notes using the Quiz component.

For example, take this Dynamic Programming quiz:

Question 1 of 2
What is dynamic programming?
0 of 2 answered

YouTube Videos​

You can embed YouTube videos directly in your notes using the <YouTube> component. Just extract the video ID from the YouTube URL:

YouTube URL formats:

  • Standard: https://www.youtube.com/watch?v=VIDEO_ID
  • Short: https://youtu.be/VIDEO_ID

Basic usage:

<YouTube videoId="dQw4w9WgXcQ" />

With custom dimensions:

<YouTube videoId="dQw4w9WgXcQ" width="800px" height="450px" />

Example:

Tweets​

You can embed tweets using the <Twitter> component. Extract the tweet ID from the URL:

Twitter URL formats:

  • Twitter: https://twitter.com/username/status/TWEET_ID
  • X: https://x.com/username/status/TWEET_ID

Usage:

<Twitter tweetId="1867863811514163456" />

The Twitter component automatically detects your site's light/dark theme and adjusts the tweet appearance accordingly.

Example: