Skip to main content
Redhat Developers  Logo
  • Products

    Featured

    • Red Hat Enterprise Linux
      Red Hat Enterprise Linux Icon
    • Red Hat OpenShift AI
      Red Hat OpenShift AI
    • Red Hat Enterprise Linux AI
      Linux icon inside of a brain
    • Image mode for Red Hat Enterprise Linux
      RHEL image mode
    • Red Hat OpenShift
      Openshift icon
    • Red Hat Ansible Automation Platform
      Ansible icon
    • Red Hat Developer Hub
      Developer Hub
    • View All Red Hat Products
    • Linux

      • Red Hat Enterprise Linux
      • Image mode for Red Hat Enterprise Linux
      • Red Hat Universal Base Images (UBI)
    • Java runtimes & frameworks

      • JBoss Enterprise Application Platform
      • Red Hat build of OpenJDK
    • Kubernetes

      • Red Hat OpenShift
      • Microsoft Azure Red Hat OpenShift
      • Red Hat OpenShift Virtualization
      • Red Hat OpenShift Lightspeed
    • Integration & App Connectivity

      • Red Hat Build of Apache Camel
      • Red Hat Service Interconnect
      • Red Hat Connectivity Link
    • AI/ML

      • Red Hat OpenShift AI
      • Red Hat Enterprise Linux AI
    • Automation

      • Red Hat Ansible Automation Platform
      • Red Hat Ansible Lightspeed
    • Developer tools

      • Red Hat Trusted Software Supply Chain
      • Podman Desktop
      • Red Hat OpenShift Dev Spaces
    • Developer Sandbox

      Developer Sandbox
      Try Red Hat products and technologies without setup or configuration fees for 30 days with this shared Openshift and Kubernetes cluster.
    • Try at no cost
  • Technologies

    Featured

    • AI/ML
      AI/ML Icon
    • Linux
      Linux Icon
    • Kubernetes
      Cloud icon
    • Automation
      Automation Icon showing arrows moving in a circle around a gear
    • View All Technologies
    • Programming Languages & Frameworks

      • Java
      • Python
      • JavaScript
    • System Design & Architecture

      • Red Hat architecture and design patterns
      • Microservices
      • Event-Driven Architecture
      • Databases
    • Developer Productivity

      • Developer productivity
      • Developer Tools
      • GitOps
    • Secure Development & Architectures

      • Security
      • Secure coding
    • Platform Engineering

      • DevOps
      • DevSecOps
      • Ansible automation for applications and services
    • Automated Data Processing

      • AI/ML
      • Data Science
      • Apache Kafka on Kubernetes
      • View All Technologies
    • Start exploring in the Developer Sandbox for free

      sandbox graphic
      Try Red Hat's products and technologies without setup or configuration.
    • Try at no cost
  • Learn

    Featured

    • Kubernetes & Cloud Native
      Openshift icon
    • Linux
      Rhel icon
    • Automation
      Ansible cloud icon
    • Java
      Java icon
    • AI/ML
      AI/ML Icon
    • View All Learning Resources

    E-Books

    • GitOps Cookbook
    • Podman in Action
    • Kubernetes Operators
    • The Path to GitOps
    • View All E-books

    Cheat Sheets

    • Linux Commands
    • Bash Commands
    • Git
    • systemd Commands
    • View All Cheat Sheets

    Documentation

    • API Catalog
    • Product Documentation
    • Legacy Documentation
    • Red Hat Learning

      Learning image
      Boost your technical skills to expert-level with the help of interactive lessons offered by various Red Hat Learning programs.
    • Explore Red Hat Learning
  • Developer Sandbox

    Developer Sandbox

    • Access Red Hat’s products and technologies without setup or configuration, and start developing quicker than ever before with our new, no-cost sandbox environments.
    • Explore Developer Sandbox

    Featured Developer Sandbox activities

    • Get started with your Developer Sandbox
    • OpenShift virtualization and application modernization using the Developer Sandbox
    • Explore all Developer Sandbox activities

    Ready to start developing apps?

    • Try at no cost
  • Blog
  • Events
  • Videos

How non-developers can easily write tutorials with Didact VS Code

January 31, 2020
Brian Fitzpatrick
Related topics:
Developer ToolsIDEs
Related products:
Developer Tools

Share:

    The Didact project is designed to fill a void in Visual Studio Code, but what exactly is it? And more importantly, why should you care?

    Didact started as a "What if?" VS Code doesn’t provide a great way to walk users through a step-wise tutorial. "What if" we could meet that need by combining the following:

    • A simple markup language (such as Markdown or AsciiDoc).
    • The ability to render the markup as HTML using the VS Code webview.
    • A way to invoke the commands we create for each VS Code extension.

    Over the course of a day or so of coding, I had a working prototype.

    Why we named it Didact

    We needed a name. After Googling for unique words not found in the VS Code Marketplace, I came across didact. Merriam Webster’s definition of a didact is a person gifted, trained, or intending to instruct. It was a perfect term to describe what we were after.

    At a high level, the Didact framework is meant to instruct users to complete tasks. The project does this through a combination of text, images, and active links that show VS Code functionality in action. The tricky part is making it easy for non-developers to not only write the tutorials but also interact with the commands they want to invoke. That’s where markup languages like Markdown and AsiiDoc come into the picture. The power comes from pairing that simplicity with VS Code's command framework.

    What does Didact do?

    When developers write a VS Code extension, they create commands and call them via menus, buttons, and the command palette. The API also provides a great way to invoke them in other places. That’s how we leverage Didact.

    The goal of Didact is to employ the "tell them, tell them again, and then tell them what you told them" approach using a combination of text (or text and images) and actions. Imagine that you are presented with Figure 1 in VS Code.

    The Didact window and the Command Palette shown.
    Figure 1: Get help by using VS Code to open a Didact window. This Didact window demonstrates how to open the Command Palette.

     

    This window offers a couple of things. At the top, it provides a brief description that explains what the Command Palette is used for and how to access it. Below, it includes a simple link that opens the palette with a click, showing what happens when you press the right series of keys (e.g., Ctrl+Shift+P).

    If you click the link, it shows you how to invoke a command through the regular keys or menu items, as shown in Figure 2.

     

    Shows the link to reach a command in the palette.
    Figure 2: Click the link that shows how to reach a command in the palette.

     

    The text is written in Markdown. It pulls in simple images and a few links. A simple URI does all the heavy lifting behind the scenes in the active Didact link: didact://?commandId=workbench.action.showCommands&completion=Opened%20Command%20Palette

    If we unpack that URI, we find the command ID for showCommands in VS Code (which is triggered when you press Ctrl+Shift+P on your keyboard) and a completion message that shows what Didact did behind the scenes in a small information popup in the lower right corner, as shown in Figure 2.

    In this case, we told you what we were going to tell you, told you again, illustrated it in action, and then showed it again, reinforcing the effects of clicking the correct keys.

    What’s next for Didact?

    We are just getting started with Didact. We have plans for various expansions, including the project scaffolding functionality. Scaffolding allows you to quickly create a folder or file structure with example files to get you started with the amazing technologies VS Code.

    If you are interested in checking out this evolving framework or want to get involved, we encourage you to poke around our GitHub project page. You can also install the vscode-didact extension and play with it locally.

    We are excited to see how Didact evolves. If you have ideas for how this framework can be used, we would love to hear from you!

    Last updated: November 8, 2023

    Related Posts

    • XML Language Server and the VSCode Extension

    • Cross-language link-time optimization using Red Hat Developer Tools

    • Build your first application using GCC4 on RHEL 7 with Red Hat Developer Toolset (DTS)

    Recent Posts

    • GuideLLM: Evaluate LLM deployments for real-world inference

    • Unleashing multimodal magic with RamaLama

    • Integrate Red Hat AI Inference Server & LangChain in agentic workflows

    • Streamline multi-cloud operations with Ansible and ServiceNow

    • Automate dynamic application security testing with RapiDAST

    What’s up next?

    <drupal-media data-entity-type="media" data-entity-uuid="538004f6-d1ae-4f7c-9661-295c3d7f0ec8"></drupal-media> <p>Get a hands-on introduction to daily life as a developer crafting code on OpenShift, the open source container application platform from Red Hat, with <em>OpenShift for Developers.</em></p>

    Get the e-book
    Red Hat Developers logo LinkedIn YouTube Twitter Facebook

    Products

    • Red Hat Enterprise Linux
    • Red Hat OpenShift
    • Red Hat Ansible Automation Platform

    Build

    • Developer Sandbox
    • Developer Tools
    • Interactive Tutorials
    • API Catalog

    Quicklinks

    • Learning Resources
    • E-books
    • Cheat Sheets
    • Blog
    • Events
    • Newsletter

    Communicate

    • About us
    • Contact sales
    • Find a partner
    • Report a website issue
    • Site Status Dashboard
    • Report a security problem

    RED HAT DEVELOPER

    Build here. Go anywhere.

    We serve the builders. The problem solvers who create careers with code.

    Join us if you’re a developer, software engineer, web designer, front-end designer, UX designer, computer scientist, architect, tester, product manager, project manager or team lead.

    Sign me up

    Red Hat legal and privacy links

    • About Red Hat
    • Jobs
    • Events
    • Locations
    • Contact Red Hat
    • Red Hat Blog
    • Inclusion at Red Hat
    • Cool Stuff Store
    • Red Hat Summit

    Red Hat legal and privacy links

    • Privacy statement
    • Terms of use
    • All policies and guidelines
    • Digital accessibility

    Report a website issue