---
sidebar_position: 2
task_section_name: "Demo Module 2"
---
import { useState } from 'react';
# Advanced Task Page
Discover how to leverage advanced Docusaurus markdown features within interactive tasks to create rich, engaging learning experiences.
---
::::task[Add Syntax Highlighting to Code Blocks]
Practice adding syntax-highlighted code blocks to your documentation:
1. Create a code block using triple backticks (```)
2. Add the language identifier immediately after the opening backticks
3. Write your code inside the block
4. Close with triple backticks
**Bash example:**
```bash
docker run -d -p 8080:80 nginx
npm install express
```
**YAML example:**
```yaml
version: '3.8'
services:
web:
image: nginx:latest
ports:
- "8080:80"
```
**JSON example:**
```json
{
"name": "my-app",
"version": "1.0.0",
"dependencies": {
"react": "^18.0.0"
}
}
```
:::hint
Docusaurus supports 30+ languages out of the box. Check the [Prism language list](https://prismjs.com/#supported-languages) for all available options. You can add more languages in `docusaurus.config.ts` - see the [Docusaurus documentation](https://docusaurus.io/docs/markdown-features/code-blocks#supported-languages).
:::
::::
---
::::task[Add File Names to Code Blocks]
Add descriptive file names to your code blocks for better context:
1. After the language identifier, add a space and `title="filename.ext"`
2. The filename will appear as a header above the code block
3. This helps readers know exactly where code should be placed
```json title="tsconfig.json"
{
"compilerOptions": {
"target": "ES2020",
"strict": true,
"strictNullChecks": true,
"skipLibCheck": true
}
}
```
:::hint
Use this feature to show exactly where code should be placed in a project structure. It's especially helpful in tutorials with multiple files.
:::
::::
---
::::task[Highlight Important Code Lines]
Learn two methods for highlighting specific lines in code blocks:
**Method 1: Inline comments** (best when actively developing)
Use `highlight-next-line`, `highlight-start`, and `highlight-end` comments to mark important lines:
```js
function HighlightSomeText(highlight) {
if (highlight) {
// highlight-next-line
return 'This text is highlighted!';
}
return 'Nothing highlighted';
}
function HighlightMoreText(highlight) {
// highlight-start
if (highlight) {
return 'This range is highlighted!';
}
// highlight-end
return 'Nothing highlighted';
}
```
**Method 2: Meta string** (cleaner for published docs)
Add line numbers after the language identifier. Separate multiple lines with commas or use ranges:
```jsx {1,4-6,11}
import React from 'react';
function MyComponent(props) {
if (props.isBar) {
return
Bar
;
}
return
Foo
;
}
export default MyComponent;
```
:::hint
Supported commenting syntax:
| Style | Syntax |
| ---------- | ------------------------ |
| C-style | `/* ... */` and `// ...` |
| JSX-style | `{/* ... */}` |
| Bash-style | `# ...` |
| HTML-style | `` |
Choose inline comments when actively developing, and meta strings for final published documentation.
:::
::::
---
:::::task[Nest Admonitions in Tasks]
Practice nesting admonitions inside tasks by using the correct number of colons:
1. Task containers use 4+ colons: `::::task`
2. Hints/solutions use 3+ colons: `:::hint`
3. Nested admonitions also use 3+ colons: `:::note`
4. For deeper nesting inside hints/solutions, use 4+ colons for the admonition
**Rule:** Parent containers always need **more colons** than their children to prevent the parser from prematurely closing containers.
:::note
This is a note at the task level (3 colons).
:::
:::warning
This is a warning at the task level (3 colons).
:::
::::hint
This hint contains a nested admonition (4 colons for hint, since it needs to contain a 3-colon admonition):
:::note
This note is nested inside the hint (3 colons).
:::
::::
:::::
---
::::task[Use React Components in Tasks]
Import and use React components within your task content to create interactive experiences:
1. Import React and any hooks you need at the top of the file: `import { useState } from 'react';`
2. Define your component using `export const`
3. Use the component anywhere in your MDX content
**Example - Interactive Counter:**
export const Counter = () => {
const [count, setCount] = useState(0);
return (
Count: {count}
);
};
:::hint
Tasks support all Docusaurus MDX features, including:
- React component imports and usage (useState, useEffect, etc.)
- Tabs, admonitions, and other built-in components
- Custom CSS and styling with theme-aware variables
- Interactive JavaScript functionality
This makes tasks perfect for interactive tutorials and hands-on learning experiences!
:::
:::solution
Here is the React code running in the task:
```ts
import { useState } from 'react';
export const Counter = () => {
const [count, setCount] = useState(0);
return (