Instruqt Labs (beta)
  • Instruqt
  • Getting started
    • Setting up Version Control
    • Install Instruqt CLI
    • Creating your first lab
    • Configuration basics
    • Exploring the lab configuration
    • Adding your first chapter
    • Configuring sandboxes
    • Adding quizzes
    • Adding tasks and gating content
    • Finishing up
  • Documentation
    • Writing Lab Content
      • Project Structure
      • Markdown and Components
    • Integrations
      • Version Control
    • Lab reference
      • Content
        • Lab
        • Page
        • Activities
          • Task
          • Quiz
            • Multiple Choice
            • Single Choice
            • Text Answer
            • Numeric Answer
        • Layout
        • Tabs
          • Terminal
          • Service
          • Editor
          • External Website
          • Note
      • Sandbox
        • Containers
          • Container
          • Sidecar Container
        • Kubernetes
          • Cluster
          • Config
          • Helm
        • Nomad
          • Cluster
          • Job
        • Networking
          • Network
          • Ingress
        • Cloud Accounts
          • AWS
          • Azure
          • Google Cloud
        • Terraform
        • Template
        • Exec
        • Copy
        • Certificates
          • Root
          • Leaf
        • Random
          • Number
          • ID
          • UUID
          • Password
          • Creature
      • Functions
    • Tools
      • Instruqt CLI
    • Glossary
Powered by GitBook
On this page
  • Link
  • Button
  • Switch tab: link
  • Switch tab: button
  • Code block
  • Code group
  • Completion
  • Feedback
  • PDF
  • Quiz
  • Slides
  • Task
  • Video
Edit on GitHub
Export as PDF
  1. Documentation
  2. Writing Lab Content

Markdown and Components

Check out the components that you can use inside the markdown of instructions

PreviousProject StructureNextIntegrations

Last updated 27 days ago

Link

Simple link to a URL:

<instruqt-link to="…">
  Link
</instruqt-link>
Attribute
Type
Description

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>
Attribute
Type
Description

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>
Attribute
Type
Description

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>
Attribute
Type
Description

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>
Attribute
Type
Description

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>
Attribute
Type
Description

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>
Attribute
Type
Description

url

string required

URL to the file

Quiz

Interactively ask questions to the user:

<instruqt-quiz id="…"></instruqt-quiz>
Attribute
Type
Description

id

string required

Resource id of the quiz

Slides

Embed a presentation from Google Slides:

<instruqt-slides url="…"></instruqt-slides>
Attribute
Type
Description

url

string required

Google Slides URL

Task

Show the user a breakdown of task conditions:

<instruqt-task id="…"></instruqt-task>
Attribute
Type
Description

id

string required

Resource id of the task

Video

Embed a video from Vimeo or YouTube:

<instruqt-video url="…"></instruqt-video>
Attribute
Type
Description

url

string required

The URL of the video

source

enum optional

Either vimeo or youtube, defaults to youtube

While in progress
When complete
First step: rate the track
Second step: leave a message