Using the Content Editor

The content editor is where you write what learners see in the Instructions panel for each page. It offers a Visual editor for rich-text formatting and a Code editor for editing the underlying markdown directly, plus tools for embedding tasks, quizzes, and files.

Editor modes

Switch between Visual editor and Code editor using the two icon tabs in the top-right corner of the editor header. Hover a tab to see its name.

Visual editor (pencil icon): a rich-text view. Formatting, tables, and embedded tasks, quizzes, and assets render the way learners will see them, not as raw markdown syntax.
Code editor (code icon): the raw markdown source, with syntax highlighting. Edit the underlying markdown text directly.

There’s no split or side-by-side view. Both tabs edit the same underlying markdown, so switching between them never loses your changes.

The mode tabs only appear while the page is in edit mode. Outside edit mode, content always renders as read-only in the Visual editor’s view.

Fullscreen

Use the Fullscreen switch in the editor header to hide the outline sidebar and maximize your editing space. This is useful when working with long content or complex formatting.

The toolbar across the top of the Visual editor provides formatting and insertion tools. Selecting text also shows a small floating toolbar next to it with Bold, Italic, Strikethrough, Code, and Link.

You can also type / on an empty line to open an insert menu. It’s the fastest way to add a block, and it exposes more than the toolbar shows — including every button style, all alert types, the Completion and Feedback blocks, and Tasks and Quizzes. Items are grouped as Basic (headings, lists, quote, divider, table), Buttons, Asset, Code, Alerts, Blocks (Completion, Feedback), and Activities (Task, Quiz).

Text formatting

Button	Function
Bold	Toggles bold formatting on the selection
Italic	Toggles italic formatting on the selection
Strikethrough	Toggles strikethrough formatting on the selection

Headings

Button	Creates
Heading 1	Level 1 heading
Heading 2	Level 2 heading
Heading 3	Level 3 heading

Use headings to structure your content hierarchically, with Heading 1 for main topics, Heading 2 for major sections, and Heading 3 for subsections.

Code

The Code button’s behavior depends on your selection:

With text selected inside a single block: toggles inline code formatting on that text
With no selection, or a selection spanning multiple blocks: inserts or toggles a multi-line code block

A code block inserted this way is its own editable component with a settings popover (open it from the block) offering:

Language: syntax highlighting language
Copy to clipboard: shows a copy button on the block (on by default)
Run code: shows a Run button that sends the code to a terminal in the lab
Wrap lines: wraps long lines instead of scrolling horizontally
Line numbers: shows line numbers, with a Start at field for the first line’s number

Lists

Bullet list: bullet-point list for unordered items
Ordered list: numbered list for sequential steps

Link

Select text and click Link in the floating toolbar to open a popover with a URL field, an Apply link action, and a Remove link action. The Link button in the main toolbar instead prompts for a URL directly and applies it to the current selection.

Insert table

Inserts a 3x3 table with a header row, which you can then edit directly.

Horizontal rule

Inserts a divider line.

Insert

Opens a menu of additional block types, grouped as:

Buttons: a styled link Button, or a Switch-tab button that switches the learner to another tab
Alerts: Note, Tip, Important, Warning, or Caution callouts
Blocks: Completion (the “you’re done” panel that lets learners finish the lab) and Feedback (lets learners rate the content)

Asset

The Asset button opens a popover titled Insert asset, listing every file already uploaded under the lab’s assets directory plus an Upload new asset action. Picking an image inserts it inline. Picking any other file type inserts a link with the file’s name as the link text.

Assets live in the same file tree as everything else in the lab. See Files for how to upload, rename, and manage them.

Embedding a slide deck or PDF

You can embed a slide deck or a PDF into a page so learners view it inline without leaving the lab.

PDF. Add the PDF as a lab asset — upload it via Insert asset, or commit it to the lab’s assets/ folder — then reference it with a root-relative URL:

1
<instruqt-pdf url="/assets/handbook.pdf"></instruqt-pdf>

Use a root-relative path (/assets/…) or a full https URL to a directly-served .pdf. A page-relative path such as ./assets/handbook.pdf will not render.
If the filename has spaces, percent-encode them (My File.pdf → /assets/My%20File.pdf) or rename the file.
Cloud share links (for example Google Drive) do not work — the viewer needs the raw PDF file, so export it and add it as an asset instead.

Slide deck. How you embed a deck depends on its format:

A Google Slides deck embeds directly by its share URL or presentation ID. The deck must be shared so learners can open it (“Anyone with the link – Viewer”, or Published to the web):
```
1
<instruqt-slides url="https://docs.google.com/presentation/d/PRESENTATION_ID/edit"></instruqt-slides>
```
Any other slide deck (PowerPoint, Keynote, Canva, and so on): export it to a PDF and embed it with <instruqt-pdf> as shown above. This is the most reliable way to show any deck inline.

Task and Quiz

The Task and Quiz buttons each open a popover listing existing tasks or quizzes (with their condition or question count) and a Create new task / Create new quiz action that opens the task or quiz creation drawer.

Once inserted, the activity renders in the Visual editor as a card you can click to edit, and is stored in the markdown as an open/close tag:

1
<instruqt-task id="task_id"></instruqt-task>

1
<instruqt-quiz id="quiz_id"></instruqt-quiz>

The id must match a task or quiz defined in your Activities section. See Creating Activities to learn more.

Block handle

Hover the left edge of any block in the Visual editor to reveal a grip handle. Drag it to reorder the block, or click it to open a menu with Duplicate, Delete, and Turn into (switch the block between paragraph, headings, lists, quote, and code block).

Markdown syntax reference

The Code editor, and any markdown you paste or type directly, follow the syntax below.

Basic formatting

1
**bold** *italic* ~~strikethrough~~
2

3
# Heading 1
4
## Heading 2
5
### Heading 3
6

7
- Bullet list item
8
- Another item
9

10
1. Numbered list
11
2. Second item
12

13
[Link text](https://example.com)
14

15
| Column 1 | Column 2 |
16
| -------- | -------- |
17
| Data 1   | Data 2   |

Code block syntax

There are two equivalent ways to write a multi-line code block. The common form is a fenced code block with a language and optional comma-separated flags:

1
```bash
2
echo "Hello, World!"
3
```

The <instruqt-code> component is equivalent. You only need it when you want the line-numbers-start option, which a fenced block cannot express:

1
<instruqt-code language="bash">
2
echo "Hello, World!"
3
</instruqt-code>

The editor writes fenced blocks by default and switches to <instruqt-code> automatically when it needs to, so you can use whichever form you prefer.

Runnable code blocks

Add the run flag to make a code block executable. Learners see a Run button on the block. Clicking it sends the command to a terminal in the lab and runs it, so they don’t have to copy and paste.

1
```bash,run
2
echo "Hello from the terminal"
3
```

The same block using the component form:

1
<instruqt-code language="bash" run>
2
echo "Hello from the terminal"
3
</instruqt-code>

When using flags in a fenced block, the language must come first: write ```bash,run, not ```run. Without a language, run is read as the language name and the block will not be runnable.

Code block options

Combine options in a fenced block by separating them with commas (for example bash,run,line-numbers,wrap), or set them as attributes on <instruqt-code>.

Option	Fenced flag	Component attribute	Description
Language	first segment	`language="bash"`	Language for syntax highlighting and the block’s language label
Run	`run`	`run`	Shows the run button to execute the code in a terminal
Line numbers	`line-numbers`	`line-numbers`	Shows line numbers in the left gutter
Starting line number	not available	`line-numbers-start="10"`	Number of the first line, requires the `<instruqt-code>` form
Word wrap	`wrap`	`wrap`	Wraps long lines instead of scrolling horizontally
Hide copy button	`nocopy`	`no-copy`	Hides the copy-to-clipboard button (shown by default)

Example combining several options:

1
```javascript,run,line-numbers,wrap
2
const message = "This is a long line that wraps instead of scrolling horizontally.";
3
console.log(message);
4
```

Code groups

Group related code blocks into a single tabbed view with <instruqt-code-group>. Give each block a title to label its tab. Individual blocks can still use run and the other options. There’s no toolbar or slash-menu shortcut for this, so write it directly in the Code editor:

1
<instruqt-code-group>
2
  <instruqt-code language="bash" title="macOS / Linux" run>
3
  brew install mytool
4
  </instruqt-code>
5
  <instruqt-code language="powershell" title="Windows">
6
  choco install mytool
7
  </instruqt-code>
8
</instruqt-code-group>

Saving changes

Editing a page’s content is a content change like any other: it needs Add changes to save it to your editing session, and Publish to commit it. See Editing & Publishing for the full save and publish lifecycle.

Managing Chapters & Pages: Learn about content organization
Creating Activities: Build tasks and quizzes to embed
Files: Upload and manage assets referenced from your content
Designing Layouts: Control how content appears to learners