Markdown and Components
Check out the components that you can use inside the markdown of instructions
Link
Simple link to a URL:
<instruqt-link to="…">
Link
</instruqt-link>to
string required
URL to link to
color
string optional
Custom text color
Button
Choose between different variants or customize it with your own colors:
<instruqt-button to="…">
Button
</instruqt-button>to
string required
URL to link to
variant
enum optional
Pick a style: white, danger, warning, success or outline
background
string optional
Custom background color
color
string optional
Custom text color
Switch tab: link
Place a link that takes the user to a specific tab inside the lab:
<instruqt-switch-tab-link id="…">
Go to tab
</instruqt-switch-tab-link>id
string required
Resource id of the target tab
color
string optional
Custom text color
Switch tab: button
Place a button that takes the user to a specific tab inside the lab:
<instruqt-switch-tab-button id="…">
Go to tab
</instruqt-switch-tab-button>id
string required
Resource id of the target tab
variant
enum optional
Pick a style: white, danger, warning, success or outline
background
string optional
Custom background color
color
string optional
Custom text color
Code block
Show a code snippet to the user:
<instruqt-code language="shell">
curl parrot.live
</instruqt-code>language
string optional
Which syntax highlight to use
line-numbers
boolean optional
Show each line number
line-numbers-start
number optional
What number to start counting from
no-copy
boolean optional
Hide the copy button
run
boolean optional
Offer to run the code in a terminal
title
string optional
Used only by the code group component
Code group
Group code snippets together:
<instruqt-code-group>
<instruqt-code language="shell" title="parrot.sh">
curl parrot.live
</instruqt-code>
<instruqt-code language="sql" title="query.sql">
SELECT * FROM table
</instruqt-code>
</instruqt-code-group>
Completion
Show how the user is progressing on their tasks, with a call to action when they are all complete:
<instruqt-completion
heading="Congratualtions!"
finish-button-label="Take me home">
</instruqt-completion>heading
string optional
Greetings message
finish-button-label
string optional
Call to action button text
Feedback
Ask the user to rate the track with an optional message:
<instruqt-feedback></instruqt-feedback>
PDF
Show the user an embedded PDF:
<instruqt-pdf url="…"></instruqt-pdf>url
string required
URL to the file
Quiz
Interactively ask questions to the user:
<instruqt-quiz id="…"></instruqt-quiz>id
string required
Resource id of the quiz
Slides
Embed a presentation from Google Slides:
<instruqt-slides url="…"></instruqt-slides>url
string required
Google Slides URL
Task
Show the user a breakdown of task conditions:
<instruqt-task id="…"></instruqt-task>id
string required
Resource id of the task
Video
Embed a video from Vimeo or YouTube:
<instruqt-video url="…"></instruqt-video>url
string required
The URL of the video
source
enum optional
Either vimeo or youtube, defaults to youtube
Last updated