Skip to content

GUI Markdown support

Support for Taipy GUI Markdown syntax

The Taipy Studio extension leverages the Visual Studio Code text edition functionality to accelerate the definition of Taipy GUI pages with the Markdown syntax:

  • IntelliSense can be used in the context of page definition.
    This auto-completion feature gives you quick access to visual element types, their specific properties, and even code variables in certain situations.
    See the Auto-completion section for details.
  • Diagnostics are provided in the Problems panel and the code itself, showing syntactic problems in your page definition. Some of these problems can be quickly fixed using Quick Fixes.
    See the Diagnostics section for details.
  • Snippets are short pieces of code that can be inserted into your code with a few keystrokes.
    The Taipy Studio extension comes with a few code snippets detailed in the section on Snippets.
  • A command is available to generate a complete visual element definition in the Markdown text.
    See the Element Generation section for details.

The extension is activated when Visual Studio Code finds Markdown text:

  • In a Markdown file (the filename extension must be .md) which is part of the currently opened project;
  • In any string that appears in Python source code, part of the currently opened project, using the triple quote syntax (which allows a string to span multiple lines of text).

Auto-completion

Auto-completion (or IntelliSense) is triggered when:

  • the programmer enters the <| key sequence.
  • the programmer presses the Ctrl-<ENTER> combination in the context of a visual element context (that is, after a "<|" fragment).

Taipy Studio proposes the list of available visual element types as well as the specific list of properties for the element currently being defined.

Here is an example of how a control can be created in the Visual Studio Code text editor for a Markdown file:

Access to variable and function names

The auto-completion feature can also be used in the context of a property value to provide quick access to variable and function names that would be valid values for a given property. This works only if the Markdown content is entered as a string value in a Python file (using the triple quote syntax) or as text in a Markdown file with the same root name as a Python file sitting in the same directory, both being part of the currently opened project.
Then Taipy Studio proposes relevant Python identifiers just after the user presses the "{" key, opening a fragment to write a Python expression.

Here is what this looks like when referencing a variable name:

And here is a similar example, where a function name is required for a property that holds a callback. Candidate function names that could be set to the property is proposed to the user:

Diagnostics

Taipy Studio can detect issues in the definition of visual elements. Those issues appear in the text body itself as well as in the Problems panel (that can be displayed using the Visual Studio Ctrl+Shift+M key combination).
Some detected problems come with Quick Fixes that allow programmers to solve them semi-automatically.

Here is a list of warnings and errors detected by Taipy Studio:

  • Missing closing syntax on control elements (MSC).
    Quick fix available: add closing syntax.

  • Missing opening tag on block elements (MOT).

  • Missing closing tag on block elements (MCT).

  • Missing opening tag with matching tag id (MOTI).

  • Missing closing tag with matching tag id (MCTI).

  • Opening tag with unmatched tag id (UOTI).

  • Closing tag with unmatched tag id (UCTI).

  • Invalid property format (PE01).

  • Invalid property name (PE02).
    Property names are dependent on the visual element type. Quick fix is available.

  • Ignore negated value (PE03).
    Quick fix available: remove negated value.

  • Function not found (FNF).
    This error is detected only in the context of a Python source file.

    Quick fix available: generate a function with the correct signature into the Python file:

Element Generation

Taipy Studio provides a command to generate the skeleton of a visual element definition quickly.

  • Open the Command Palette (Ctrl+Shift+P on Windows or Unix, Cmd+Shift+P on MacOS);
  • Search for the command Generate Taipy GUI element and execute it.

The command runs a step-by-step process that lets users indicate what element needs to be generated and with what set of properties.
The definition for the new element will be inserted in the last active window.

Of course, you may want to bind this command to some key binding of your liking.

Snippets

Code snippets are proposed when the programmer presses the Ctrl-<ENTER> key combination outside a visual element context.
In a Markdown context, Taipy Studio proposes two snippets that let users insert the skeleton for a control ("<|c" snippet) or a block ("<|b" snippet) where the closing "|>" fragment is inserted as an additional line.

Here is how you can rapidly create a new control on your page: