feat: render Markdown in rich parameter descriptions (#6098)

2023-02-08 12:57:12 +01:00 · 2023-02-08 12:57:12 +01:00 · 1dc477819e
parent f24547ecb1
commit 1dc477819e
15 changed files with 280 additions and 71 deletions
--- a/cli/cliui/parameter.go
+++ b/cli/cliui/parameter.go
@ -63,8 +63,8 @@ func ParameterSchema(cmd *cobra.Command, parameterSchema codersdk.ParameterSchem

 func RichParameter(cmd *cobra.Command, templateVersionParameter codersdk.TemplateVersionParameter) (string, error) {
 	_, _ = fmt.Fprintln(cmd.OutOrStdout(), Styles.Bold.Render(templateVersionParameter.Name))
-	if templateVersionParameter.Description != "" {
-		_, _ = fmt.Fprintln(cmd.OutOrStdout(), "  "+strings.TrimSpace(strings.Join(strings.Split(templateVersionParameter.Description, "\n"), "\n  "))+"\n")
+	if templateVersionParameter.DescriptionPlaintext != "" {
+		_, _ = fmt.Fprintln(cmd.OutOrStdout(), "  "+strings.TrimSpace(strings.Join(strings.Split(templateVersionParameter.DescriptionPlaintext, "\n"), "\n  "))+"\n")
 	}

 	var err error
--- a/coderd/apidoc/docs.go
+++ b/coderd/apidoc/docs.go
@ -7555,6 +7555,9 @@ const docTemplate = `{
                "description": {
                    "type": "string"
                },
+                "description_plaintext": {
+                    "type": "string"
+                },
                "icon": {
                    "type": "string"
                },
--- a/coderd/apidoc/swagger.json
+++ b/coderd/apidoc/swagger.json
@ -6793,6 +6793,9 @@
        "description": {
          "type": "string"
        },
+        "description_plaintext": {
+          "type": "string"
+        },
        "icon": {
          "type": "string"
        },
--- a/coderd/parameter/plaintext.go
+++ b/coderd/parameter/plaintext.go
@ -0,0 +1,97 @@
+package parameter
+
+import (
+	"strings"
+
+	"github.com/charmbracelet/glamour"
+	"github.com/charmbracelet/glamour/ansi"
+	"golang.org/x/xerrors"
+)
+
+var plaintextStyle = ansi.StyleConfig{
+	Document: ansi.StyleBlock{
+		StylePrimitive: ansi.StylePrimitive{},
+	},
+	BlockQuote: ansi.StyleBlock{
+		StylePrimitive: ansi.StylePrimitive{},
+	},
+	Paragraph: ansi.StyleBlock{
+		StylePrimitive: ansi.StylePrimitive{},
+	},
+	List: ansi.StyleList{
+		StyleBlock: ansi.StyleBlock{
+			StylePrimitive: ansi.StylePrimitive{},
+		},
+		LevelIndent: 4,
+	},
+	Heading: ansi.StyleBlock{
+		StylePrimitive: ansi.StylePrimitive{},
+	},
+	H1: ansi.StyleBlock{
+		StylePrimitive: ansi.StylePrimitive{},
+	},
+	H2: ansi.StyleBlock{
+		StylePrimitive: ansi.StylePrimitive{},
+	},
+	H3: ansi.StyleBlock{
+		StylePrimitive: ansi.StylePrimitive{},
+	},
+	H4: ansi.StyleBlock{
+		StylePrimitive: ansi.StylePrimitive{},
+	},
+	H5: ansi.StyleBlock{
+		StylePrimitive: ansi.StylePrimitive{},
+	},
+	H6: ansi.StyleBlock{
+		StylePrimitive: ansi.StylePrimitive{},
+	},
+	Strikethrough:  ansi.StylePrimitive{},
+	Emph:           ansi.StylePrimitive{},
+	Strong:         ansi.StylePrimitive{},
+	HorizontalRule: ansi.StylePrimitive{},
+	Item:           ansi.StylePrimitive{},
+	Enumeration: ansi.StylePrimitive{
+		BlockPrefix: ". ",
+	}, Task: ansi.StyleTask{},
+	Link: ansi.StylePrimitive{
+		Format: "({{.text}})",
+	},
+	LinkText: ansi.StylePrimitive{
+		Format: "{{.text}}",
+	},
+	ImageText: ansi.StylePrimitive{
+		Format: "{{.text}}",
+	},
+	Image: ansi.StylePrimitive{
+		Format: "({{.text}})",
+	},
+	Code: ansi.StyleBlock{
+		StylePrimitive: ansi.StylePrimitive{},
+	},
+	CodeBlock: ansi.StyleCodeBlock{
+		StyleBlock: ansi.StyleBlock{},
+	},
+	Table:                 ansi.StyleTable{},
+	DefinitionDescription: ansi.StylePrimitive{},
+}
+
+// Plaintext function converts the description with optional Markdown tags
+// to the plaintext form.
+func Plaintext(markdown string) (string, error) {
+	renderer, err := glamour.NewTermRenderer(
+		glamour.WithStandardStyle("ascii"),
+		glamour.WithWordWrap(0), // don't need to add spaces in the end of line
+		glamour.WithStyles(plaintextStyle),
+	)
+	if err != nil {
+		return "", xerrors.Errorf("can't initialize the Markdown renderer: %w", err)
+	}
+
+	output, err := renderer.Render(markdown)
+	if err != nil {
+		return "", xerrors.Errorf("can't render description to plaintext: %w", err)
+	}
+	defer renderer.Close()
+
+	return strings.TrimSpace(output), nil
+}
--- a/coderd/parameter/plaintext_test.go
+++ b/coderd/parameter/plaintext_test.go
@ -0,0 +1,49 @@
+package parameter_test
+
+import (
+	"testing"
+
+	"github.com/coder/coder/coderd/parameter"
+
+	"github.com/stretchr/testify/require"
+)
+
+func TestPlaintext(t *testing.T) {
+	t.Parallel()
+	t.Run("Simple", func(t *testing.T) {
+		t.Parallel()
+
+		mdDescription := `# Provide the machine image
+See the [registry](https://container.registry.blah/namespace) for options.
+
+![Minion](https://octodex.github.com/images/minion.png)
+
+**This is bold text.**
+__This is bold text.__
+*This is italic text.*
+> Blockquotes can also be nested.
+~~Strikethrough.~~
+
+1. Lorem ipsum dolor sit amet.
+2. Consectetur adipiscing elit.
+3. Integer molestie lorem at massa.
+
+` + "`There are also code tags!`"
+
+		expected := "Provide the machine image\nSee the registry (https://container.registry.blah/namespace) for options.\n\nMinion (https://octodex.github.com/images/minion.png)\n\nThis is bold text.\nThis is bold text.\nThis is italic text.\n\nBlockquotes can also be nested.\nStrikethrough.\n\n1. Lorem ipsum dolor sit amet.\n2. Consectetur adipiscing elit.\n3. Integer molestie lorem at massa.\n\nThere are also code tags!"
+
+		stripped, err := parameter.Plaintext(mdDescription)
+		require.NoError(t, err)
+		require.Equal(t, expected, stripped)
+	})
+
+	t.Run("Nothing changes", func(t *testing.T) {
+		t.Parallel()
+
+		nothingChanges := "This is a simple description, so nothing changes."
+
+		stripped, err := parameter.Plaintext(nothingChanges)
+		require.NoError(t, err)
+		require.Equal(t, nothingChanges, stripped)
+	})
+}
--- a/coderd/templateversions.go
+++ b/coderd/templateversions.go
@ -1458,19 +1458,25 @@ func convertTemplateVersionParameter(param database.TemplateVersionParameter) (c
 			Icon:        option.Icon,
 		})
 	}
+
+	descriptionPlaintext, err := parameter.Plaintext(param.Description)
+	if err != nil {
+		return codersdk.TemplateVersionParameter{}, err
+	}
 	return codersdk.TemplateVersionParameter{
-		Name:                param.Name,
-		Description:         param.Description,
-		Type:                param.Type,
-		Mutable:             param.Mutable,
-		DefaultValue:        param.DefaultValue,
-		Icon:                param.Icon,
-		Options:             options,
-		ValidationRegex:     param.ValidationRegex,
-		ValidationMin:       param.ValidationMin,
-		ValidationMax:       param.ValidationMax,
-		ValidationError:     param.ValidationError,
-		ValidationMonotonic: codersdk.ValidationMonotonicOrder(param.ValidationMonotonic),
+		Name:                 param.Name,
+		Description:          param.Description,
+		DescriptionPlaintext: descriptionPlaintext,
+		Type:                 param.Type,
+		Mutable:              param.Mutable,
+		DefaultValue:         param.DefaultValue,
+		Icon:                 param.Icon,
+		Options:              options,
+		ValidationRegex:      param.ValidationRegex,
+		ValidationMin:        param.ValidationMin,
+		ValidationMax:        param.ValidationMax,
+		ValidationError:      param.ValidationError,
+		ValidationMonotonic:  codersdk.ValidationMonotonicOrder(param.ValidationMonotonic),
 	}, nil
 }

--- a/coderd/workspaces_test.go
+++ b/coderd/workspaces_test.go
@ -20,6 +20,7 @@ import (
 	"github.com/coder/coder/coderd/autobuild/schedule"
 	"github.com/coder/coder/coderd/coderdtest"
 	"github.com/coder/coder/coderd/database"
+	"github.com/coder/coder/coderd/parameter"
 	"github.com/coder/coder/coderd/rbac"
 	"github.com/coder/coder/coderd/util/ptr"
 	"github.com/coder/coder/codersdk"
@ -1788,12 +1789,12 @@ func TestWorkspaceWithRichParameters(t *testing.T) {
 	const (
 		firstParameterName        = "first_parameter"
 		firstParameterType        = "string"
-		firstParameterDescription = "This is first parameter"
+		firstParameterDescription = "This is _first_ *parameter*"
 		firstParameterValue       = "1"

 		secondParameterName                = "second_parameter"
 		secondParameterType                = "number"
-		secondParameterDescription         = "This is second parameter"
+		secondParameterDescription         = "_This_ is second *parameter*"
 		secondParameterValue               = "2"
 		secondParameterValidationMonotonic = codersdk.MonotonicOrderIncreasing
 	)
@ -1835,16 +1836,24 @@ func TestWorkspaceWithRichParameters(t *testing.T) {
 	ctx, cancel := context.WithTimeout(context.Background(), testutil.WaitLong)
 	defer cancel()

+	firstParameterDescriptionPlaintext, err := parameter.Plaintext(firstParameterDescription)
+	require.NoError(t, err)
+	secondParameterDescriptionPlaintext, err := parameter.Plaintext(secondParameterDescription)
+	require.NoError(t, err)
+
 	templateRichParameters, err := client.TemplateVersionRichParameters(ctx, version.ID)
 	require.NoError(t, err)
 	require.Len(t, templateRichParameters, 2)
-	require.Equal(t, templateRichParameters[0].Name, firstParameterName)
-	require.Equal(t, templateRichParameters[0].Type, firstParameterType)
-	require.Equal(t, templateRichParameters[0].ValidationMonotonic, codersdk.ValidationMonotonicOrder("")) // no validation for string
-
-	require.Equal(t, templateRichParameters[1].Name, secondParameterName)
-	require.Equal(t, templateRichParameters[1].Type, secondParameterType)
-	require.Equal(t, templateRichParameters[1].ValidationMonotonic, secondParameterValidationMonotonic)
+	require.Equal(t, firstParameterName, templateRichParameters[0].Name)
+	require.Equal(t, firstParameterType, templateRichParameters[0].Type)
+	require.Equal(t, firstParameterDescription, templateRichParameters[0].Description)
+	require.Equal(t, firstParameterDescriptionPlaintext, templateRichParameters[0].DescriptionPlaintext)
+	require.Equal(t, codersdk.ValidationMonotonicOrder(""), templateRichParameters[0].ValidationMonotonic) // no validation for string
+	require.Equal(t, secondParameterName, templateRichParameters[1].Name)
+	require.Equal(t, secondParameterType, templateRichParameters[1].Type)
+	require.Equal(t, secondParameterDescription, templateRichParameters[1].Description)
+	require.Equal(t, secondParameterDescriptionPlaintext, templateRichParameters[1].DescriptionPlaintext)
+	require.Equal(t, secondParameterValidationMonotonic, templateRichParameters[1].ValidationMonotonic)

 	expectedBuildParameters := []codersdk.WorkspaceBuildParameter{
 		{Name: firstParameterName, Value: firstParameterValue},
--- a/codersdk/templateversions.go
+++ b/codersdk/templateversions.go
@ -33,18 +33,19 @@ const (

 // TemplateVersionParameter represents a parameter for a template version.
 type TemplateVersionParameter struct {
-	Name                string                           `json:"name"`
-	Description         string                           `json:"description"`
-	Type                string                           `json:"type" enums:"string,number,bool"`
-	Mutable             bool                             `json:"mutable"`
-	DefaultValue        string                           `json:"default_value"`
-	Icon                string                           `json:"icon"`
-	Options             []TemplateVersionParameterOption `json:"options"`
-	ValidationError     string                           `json:"validation_error,omitempty"`
-	ValidationRegex     string                           `json:"validation_regex,omitempty"`
-	ValidationMin       int32                            `json:"validation_min,omitempty"`
-	ValidationMax       int32                            `json:"validation_max,omitempty"`
-	ValidationMonotonic ValidationMonotonicOrder         `json:"validation_monotonic,omitempty" enums:"increasing,decreasing"`
+	Name                 string                           `json:"name"`
+	Description          string                           `json:"description"`
+	DescriptionPlaintext string                           `json:"description_plaintext"`
+	Type                 string                           `json:"type" enums:"string,number,bool"`
+	Mutable              bool                             `json:"mutable"`
+	DefaultValue         string                           `json:"default_value"`
+	Icon                 string                           `json:"icon"`
+	Options              []TemplateVersionParameterOption `json:"options"`
+	ValidationError      string                           `json:"validation_error,omitempty"`
+	ValidationRegex      string                           `json:"validation_regex,omitempty"`
+	ValidationMin        int32                            `json:"validation_min,omitempty"`
+	ValidationMax        int32                            `json:"validation_max,omitempty"`
+	ValidationMonotonic  ValidationMonotonicOrder         `json:"validation_monotonic,omitempty" enums:"increasing,decreasing"`
 }

 // TemplateVersionParameterOption represents a selectable option for a template parameter.
--- a/docs/api/schemas.md
+++ b/docs/api/schemas.md
@ -4505,6 +4505,7 @@ Parameter represents a set value for the scope.
 {
  "default_value": "string",
  "description": "string",
+  "description_plaintext": "string",
  "icon": "string",
  "mutable": true,
  "name": "string",
@ -4527,20 +4528,21 @@ Parameter represents a set value for the scope.

 ### Properties

-| Name                   | Type                                                                                        | Required | Restrictions | Description |
-| ---------------------- | ------------------------------------------------------------------------------------------- | -------- | ------------ | ----------- |
-| `default_value`        | string                                                                                      | false    |              |             |
-| `description`          | string                                                                                      | false    |              |             |
-| `icon`                 | string                                                                                      | false    |              |             |
-| `mutable`              | boolean                                                                                     | false    |              |             |
-| `name`                 | string                                                                                      | false    |              |             |
-| `options`              | array of [codersdk.TemplateVersionParameterOption](#codersdktemplateversionparameteroption) | false    |              |             |
-| `type`                 | string                                                                                      | false    |              |             |
-| `validation_error`     | string                                                                                      | false    |              |             |
-| `validation_max`       | integer                                                                                     | false    |              |             |
-| `validation_min`       | integer                                                                                     | false    |              |             |
-| `validation_monotonic` | [codersdk.ValidationMonotonicOrder](#codersdkvalidationmonotonicorder)                      | false    |              |             |
-| `validation_regex`     | string                                                                                      | false    |              |             |
+| Name                    | Type                                                                                        | Required | Restrictions | Description |
+| ----------------------- | ------------------------------------------------------------------------------------------- | -------- | ------------ | ----------- |
+| `default_value`         | string                                                                                      | false    |              |             |
+| `description`           | string                                                                                      | false    |              |             |
+| `description_plaintext` | string                                                                                      | false    |              |             |
+| `icon`                  | string                                                                                      | false    |              |             |
+| `mutable`               | boolean                                                                                     | false    |              |             |
+| `name`                  | string                                                                                      | false    |              |             |
+| `options`               | array of [codersdk.TemplateVersionParameterOption](#codersdktemplateversionparameteroption) | false    |              |             |
+| `type`                  | string                                                                                      | false    |              |             |
+| `validation_error`      | string                                                                                      | false    |              |             |
+| `validation_max`        | integer                                                                                     | false    |              |             |
+| `validation_min`        | integer                                                                                     | false    |              |             |
+| `validation_monotonic`  | [codersdk.ValidationMonotonicOrder](#codersdkvalidationmonotonicorder)                      | false    |              |             |
+| `validation_regex`      | string                                                                                      | false    |              |             |

 #### Enumerated Values

--- a/docs/api/templates.md
+++ b/docs/api/templates.md
@ -2092,6 +2092,7 @@ curl -X GET http://coder-server:8080/api/v2/templateversions/{templateversion}/r
  {
    "default_value": "string",
    "description": "string",
+    "description_plaintext": "string",
    "icon": "string",
    "mutable": true,
    "name": "string",
@ -2123,25 +2124,26 @@ curl -X GET http://coder-server:8080/api/v2/templateversions/{templateversion}/r

 Status Code **200**

-| Name                     | Type                                                                             | Required | Restrictions | Description |
-| ------------------------ | -------------------------------------------------------------------------------- | -------- | ------------ | ----------- |
-| `[array item]`           | array                                                                            | false    |              |             |
-| `» default_value`        | string                                                                           | false    |              |             |
-| `» description`          | string                                                                           | false    |              |             |
-| `» icon`                 | string                                                                           | false    |              |             |
-| `» mutable`              | boolean                                                                          | false    |              |             |
-| `» name`                 | string                                                                           | false    |              |             |
-| `» options`              | array                                                                            | false    |              |             |
-| `»» description`         | string                                                                           | false    |              |             |
-| `»» icon`                | string                                                                           | false    |              |             |
-| `»» name`                | string                                                                           | false    |              |             |
-| `»» value`               | string                                                                           | false    |              |             |
-| `» type`                 | string                                                                           | false    |              |             |
-| `» validation_error`     | string                                                                           | false    |              |             |
-| `» validation_max`       | integer                                                                          | false    |              |             |
-| `» validation_min`       | integer                                                                          | false    |              |             |
-| `» validation_monotonic` | [codersdk.ValidationMonotonicOrder](schemas.md#codersdkvalidationmonotonicorder) | false    |              |             |
-| `» validation_regex`     | string                                                                           | false    |              |             |
+| Name                      | Type                                                                             | Required | Restrictions | Description |
+| ------------------------- | -------------------------------------------------------------------------------- | -------- | ------------ | ----------- |
+| `[array item]`            | array                                                                            | false    |              |             |
+| `» default_value`         | string                                                                           | false    |              |             |
+| `» description`           | string                                                                           | false    |              |             |
+| `» description_plaintext` | string                                                                           | false    |              |             |
+| `» icon`                  | string                                                                           | false    |              |             |
+| `» mutable`               | boolean                                                                          | false    |              |             |
+| `» name`                  | string                                                                           | false    |              |             |
+| `» options`               | array                                                                            | false    |              |             |
+| `»» description`          | string                                                                           | false    |              |             |
+| `»» icon`                 | string                                                                           | false    |              |             |
+| `»» name`                 | string                                                                           | false    |              |             |
+| `»» value`                | string                                                                           | false    |              |             |
+| `» type`                  | string                                                                           | false    |              |             |
+| `» validation_error`      | string                                                                           | false    |              |             |
+| `» validation_max`        | integer                                                                          | false    |              |             |
+| `» validation_min`        | integer                                                                          | false    |              |             |
+| `» validation_monotonic`  | [codersdk.ValidationMonotonicOrder](schemas.md#codersdkvalidationmonotonicorder) | false    |              |             |
+| `» validation_regex`      | string                                                                           | false    |              |             |

 #### Enumerated Values

--- a/go.mod
+++ b/go.mod
@ -171,7 +171,11 @@ require (

 require (
 	cloud.google.com/go/longrunning v0.3.0 // indirect
+	github.com/aymanbagabas/go-osc52 v1.0.3 // indirect
+	github.com/aymerick/douceur v0.2.0 // indirect
+	github.com/charmbracelet/glamour v0.6.0 // indirect
 	github.com/cpuguy83/go-md2man/v2 v2.0.2 // indirect
+	github.com/gorilla/css v1.0.0 // indirect
 	github.com/hashicorp/go-cty v1.4.1-0.20200414143053-d3edf31b6320 // indirect
 	github.com/hashicorp/go-hclog v1.2.1 // indirect
 	github.com/hashicorp/go-plugin v1.4.4 // indirect
@ -182,14 +186,17 @@ require (
 	github.com/hashicorp/terraform-plugin-sdk/v2 v2.20.0 // indirect
 	github.com/hashicorp/terraform-registry-address v0.0.0-20220623143253-7d51757b572c // indirect
 	github.com/hashicorp/terraform-svchost v0.0.0-20200729002733-f050f53b9734 // indirect
+	github.com/microcosm-cc/bluemonday v1.0.21 // indirect
 	github.com/mitchellh/copystructure v1.2.0 // indirect
 	github.com/mitchellh/go-testing-interface v1.14.1 // indirect
 	github.com/mitchellh/reflectwalk v1.0.2 // indirect
 	github.com/oklog/run v1.0.0 // indirect
+	github.com/olekukonko/tablewriter v0.0.5 // indirect
 	github.com/russross/blackfriday/v2 v2.1.0 // indirect
 	github.com/vmihailenco/msgpack v4.0.4+incompatible // indirect
 	github.com/vmihailenco/msgpack/v4 v4.3.12 // indirect
 	github.com/vmihailenco/tagparser v0.1.1 // indirect
+	github.com/yuin/goldmark-emoji v1.0.1 // indirect
 )

 require (
@ -269,7 +276,7 @@ require (
 	github.com/magiconair/properties v1.8.6 // indirect
 	github.com/mailru/easyjson v0.7.6 // indirect
 	github.com/mattn/go-colorable v0.1.12 // indirect
-	github.com/mattn/go-runewidth v0.0.13 // indirect
+	github.com/mattn/go-runewidth v0.0.14 // indirect
 	github.com/matttproud/golang_protobuf_extensions v1.0.4 // indirect
 	github.com/mdlayher/genetlink v1.2.0 // indirect
 	github.com/mdlayher/netlink v1.6.0 // indirect
@ -281,7 +288,7 @@ require (
 	github.com/moby/term v0.0.0-20210619224110-3f7ff695adc6 // indirect
 	github.com/muesli/ansi v0.0.0-20211031195517-c9f0611b6c70 // indirect
 	github.com/muesli/reflow v0.3.0
-	github.com/muesli/termenv v0.11.1-0.20220212125758-44cd13922739 // indirect
+	github.com/muesli/termenv v0.13.0 // indirect
 	github.com/niklasfasching/go-org v1.6.5 // indirect
 	github.com/nu7hatch/gouuid v0.0.0-20131221200532-179d4d0c4d8d // indirect
 	github.com/opencontainers/go-digest v1.0.0 // indirect
--- a/go.sum
+++ b/go.sum
@ -255,6 +255,10 @@ github.com/aws/aws-sdk-go-v2/service/sts v1.6.1/go.mod h1:hLZ/AnkIKHLuPGjEiyghNE
 github.com/aws/aws-sdk-go-v2/service/sts v1.7.2/go.mod h1:8EzeIqfWt2wWT4rJVu3f21TfrhJ8AEMzVybRNSb/b4g=
 github.com/aws/smithy-go v1.7.0/go.mod h1:SObp3lf9smib00L/v3U2eAKG8FyQ7iLrJnQiAmR5n+E=
 github.com/aws/smithy-go v1.8.0/go.mod h1:SObp3lf9smib00L/v3U2eAKG8FyQ7iLrJnQiAmR5n+E=
+github.com/aymanbagabas/go-osc52 v1.0.3 h1:DTwqENW7X9arYimJrPeGZcV0ln14sGMt3pHZspWD+Mg=
+github.com/aymanbagabas/go-osc52 v1.0.3/go.mod h1:zT8H+Rk4VSabYN90pWyugflM3ZhpTZNC7cASDfUCdT4=
+github.com/aymerick/douceur v0.2.0 h1:Mv+mAeH1Q+n9Fr+oyamOlAkUNPWPlA8PPGR0QAaYuPk=
+github.com/aymerick/douceur v0.2.0/go.mod h1:wlT5vV2O3h55X9m7iVYN0TBM0NH/MmbLnd30/FjWUq4=
 github.com/benbjohnson/clock v1.0.3/go.mod h1:bGMdMPoPVvcYyt1gHDf4J2KE153Yf9BuiUKYMaxlTDM=
 github.com/beorn7/perks v0.0.0-20160804104726-4c0e84591b9a/go.mod h1:Dwedo/Wpr24TaqPxmxbtue+5NUziq4I4S80YR8gNf3Q=
 github.com/beorn7/perks v0.0.0-20180321164747-3a771d992973/go.mod h1:Dwedo/Wpr24TaqPxmxbtue+5NUziq4I4S80YR8gNf3Q=
@ -315,6 +319,8 @@ github.com/charmbracelet/bubbletea v0.20.0 h1:/b8LEPgCbNr7WWZ2LuE/BV1/r4t5PyYJtD
 github.com/charmbracelet/bubbletea v0.20.0/go.mod h1:zpkze1Rioo4rJELjRyGlm9T2YNou1Fm4LIJQSa5QMEM=
 github.com/charmbracelet/charm v0.12.1 h1:7RV+WZUWkocs5pS+UrKdVeRbmLf58rPpjhUo6+ZE7gE=
 github.com/charmbracelet/charm v0.12.1/go.mod h1:jpjWedCVoAJHTRgaUkugf++9ziYKxQgDTxmJYLUdGak=
+github.com/charmbracelet/glamour v0.6.0 h1:wi8fse3Y7nfcabbbDuwolqTqMQPMnVPeZhDM273bISc=
+github.com/charmbracelet/glamour v0.6.0/go.mod h1:taqWV4swIMMbWALc0m7AfE9JkPSU8om2538k9ITBxOc=
 github.com/charmbracelet/harmonica v0.1.0/go.mod h1:KSri/1RMQOZLbw7AHqgcBycp8pgJnQMYYT8QZRqZ1Ao=
 github.com/charmbracelet/lipgloss v0.4.0/go.mod h1:vmdkHvce7UzX6xkyf4cca8WlwdQ5RQr8fzta+xl7BOM=
 github.com/charmbracelet/lipgloss v0.6.0 h1:1StyZB9vBSOyuZxQUcUwGr17JmojPNm87inij9N3wJY=
@ -941,6 +947,8 @@ github.com/gopherjs/gopherjs v0.0.0-20181017120253-0766667cb4d1/go.mod h1:wJfORR
 github.com/gordonklaus/ineffassign v0.0.0-20200309095847-7953dde2c7bf/go.mod h1:cuNKsD1zp2v6XfE/orVX2QE1LC+i254ceGcVeDT3pTU=
 github.com/gordonklaus/ineffassign v0.0.0-20210225214923-2e10b2664254/go.mod h1:M9mZEtGIsR1oDaZagNPNG9iq9n2HrhZ17dsXk73V3Lw=
 github.com/gorhill/cronexpr v0.0.0-20180427100037-88b0669f7d75/go.mod h1:g2644b03hfBX9Ov0ZBDgXXens4rxSxmqFBbhvKv2yVA=
+github.com/gorilla/css v1.0.0 h1:BQqNyPTi50JCFMTw/b67hByjMVXZRwGha6wxVGkeihY=
+github.com/gorilla/css v1.0.0/go.mod h1:Dn721qIggHpt4+EFCcTLTU/vk5ySda2ReITrtgBl60c=
 github.com/gorilla/handlers v0.0.0-20150720190736-60c7bfde3e33/go.mod h1:Qkdc/uu4tH4g6mTK6auzZ766c4CA0Ng8+o/OAirnOIQ=
 github.com/gorilla/handlers v1.4.2/go.mod h1:Qkdc/uu4tH4g6mTK6auzZ766c4CA0Ng8+o/OAirnOIQ=
 github.com/gorilla/mux v1.7.2/go.mod h1:1lud6UwP+6orDFRuTfBEV8e9/aOM/c4fVVCaMa2zaAs=
@ -1327,6 +1335,8 @@ github.com/mattn/go-runewidth v0.0.10/go.mod h1:RAqKPSqVFrSLVXbA8x7dzmKdmGzieGRC
 github.com/mattn/go-runewidth v0.0.12/go.mod h1:RAqKPSqVFrSLVXbA8x7dzmKdmGzieGRCM46jaSJTDAk=
 github.com/mattn/go-runewidth v0.0.13 h1:lTGmDsbAYt5DmK6OnoV7EuIF1wEIFAcxld6ypU4OSgU=
 github.com/mattn/go-runewidth v0.0.13/go.mod h1:Jdepj2loyihRzMpdS35Xk/zdY8IAYHsh153qUoGf23w=
+github.com/mattn/go-runewidth v0.0.14 h1:+xnbZSEeDbOIg5/mE6JF0w6n9duR1l3/WmbinWVwUuU=
+github.com/mattn/go-runewidth v0.0.14/go.mod h1:Jdepj2loyihRzMpdS35Xk/zdY8IAYHsh153qUoGf23w=
 github.com/mattn/go-shellwords v1.0.3/go.mod h1:3xCvwCdWdlDJUrvuMn7Wuy9eWs4pE8vqg+NOMyg4B2o=
 github.com/mattn/go-shellwords v1.0.6/go.mod h1:3xCvwCdWdlDJUrvuMn7Wuy9eWs4pE8vqg+NOMyg4B2o=
 github.com/mattn/go-shellwords v1.0.12/go.mod h1:EZzvwXDESEeg03EKmM+RmDnNOPKG4lLtQsUlTZDWQ8Y=
@ -1361,6 +1371,8 @@ github.com/mgechev/dots v0.0.0-20210922191527-e955255bf517/go.mod h1:KQ7+USdGKfp
 github.com/mgechev/revive v1.1.2/go.mod h1:bnXsMr+ZTH09V5rssEI+jHAZ4z+ZdyhgO/zsy3EhK+0=
 github.com/mgutz/ansi v0.0.0-20170206155736-9520e82c474b h1:j7+1HpAFS1zy5+Q4qx1fWh90gTKwiN4QCGoY9TWyyO4=
 github.com/mgutz/ansi v0.0.0-20170206155736-9520e82c474b/go.mod h1:01TrycV0kFyexm33Z7vhZRXopbI8J3TDReVlkTgMUxE=
+github.com/microcosm-cc/bluemonday v1.0.21 h1:dNH3e4PSyE4vNX+KlRGHT5KrSvjeUkoNPwEORjffHJg=
+github.com/microcosm-cc/bluemonday v1.0.21/go.mod h1:ytNkv4RrDrLJ2pqlsSI46O6IVXmZOBBD4SaJyDwwTkM=
 github.com/miekg/dns v1.0.14/go.mod h1:W1PPwlIAgtquWBMBEV9nkV9Cazfe8ScdGz/Lj7v3Nrg=
 github.com/miekg/dns v1.1.26/go.mod h1:bPDLeHnStXmXAq1m/Ch/hvfNHr14JKNPMBo3VZKjuso=
 github.com/miekg/dns v1.1.35/go.mod h1:KNUDUusw/aVsxyTYZM1oqvCicbwhgbNgztCETuNZ7xM=
@ -1439,6 +1451,8 @@ github.com/muesli/termenv v0.9.0/go.mod h1:R/LzAKf+suGs4IsO95y7+7DpFHO0KABgnZqtl
 github.com/muesli/termenv v0.11.1-0.20220204035834-5ac8409525e0/go.mod h1:Bd5NYQ7pd+SrtBSrSNoBBmXlcY8+Xj4BMJgh8qcZrvs=
 github.com/muesli/termenv v0.11.1-0.20220212125758-44cd13922739 h1:QANkGiGr39l1EESqrE0gZw0/AJNYzIvoGLhIoVYtluI=
 github.com/muesli/termenv v0.11.1-0.20220212125758-44cd13922739/go.mod h1:Bd5NYQ7pd+SrtBSrSNoBBmXlcY8+Xj4BMJgh8qcZrvs=
+github.com/muesli/termenv v0.13.0 h1:wK20DRpJdDX8b7Ek2QfhvqhRQFZ237RGRO0RQ/Iqdy0=
+github.com/muesli/termenv v0.13.0/go.mod h1:sP1+uffeLaEYpyOTb8pLCUctGcGLnoFjSn4YJK5e2bc=
 github.com/munnerz/goautoneg v0.0.0-20120707110453-a547fc61f48d/go.mod h1:+n7T8mK8HuQTcFwEeznm/DIxMOiR9yIdICNftLE1DvQ=
 github.com/munnerz/goautoneg v0.0.0-20191010083416-a7dc8b61c822/go.mod h1:+n7T8mK8HuQTcFwEeznm/DIxMOiR9yIdICNftLE1DvQ=
 github.com/mutecomm/go-sqlcipher/v4 v4.4.0/go.mod h1:PyN04SaWalavxRGH9E8ZftG6Ju7rsPrGmQRjrEaVpiY=
@ -1469,6 +1483,7 @@ github.com/oklog/ulid v1.3.1/go.mod h1:CirwcVhetQ6Lv90oh/F+FBtV6XMibvdAFo93nm5qn
 github.com/olekukonko/tablewriter v0.0.0-20170122224234-a0225b3f23b5/go.mod h1:vsDQFd/mU46D+Z4whnwzcISnGGzXWMclvtLoiIKAKIo=
 github.com/olekukonko/tablewriter v0.0.1/go.mod h1:vsDQFd/mU46D+Z4whnwzcISnGGzXWMclvtLoiIKAKIo=
 github.com/olekukonko/tablewriter v0.0.2/go.mod h1:rSAaSIOAGT9odnlyGlUfAJaoc5w2fSBUmeGDbRWPxyQ=
+github.com/olekukonko/tablewriter v0.0.5 h1:P2Ga83D34wi1o9J6Wh1mRuqd4mF/x/lgBS7N7AbDhec=
 github.com/olekukonko/tablewriter v0.0.5/go.mod h1:hPp6KlRPjbx+hW8ykQs1w3UBbZlj6HuIJcUGPhkA7kY=
 github.com/onsi/ginkgo v0.0.0-20151202141238-7f8ab55aaf3b/go.mod h1:lLunBs/Ym6LB5Z9jYTR76FiuTmxDTDusOGeTQH+WWjE=
 github.com/onsi/ginkgo v0.0.0-20170829012221-11459a886d9c/go.mod h1:lLunBs/Ym6LB5Z9jYTR76FiuTmxDTDusOGeTQH+WWjE=
@ -1900,8 +1915,11 @@ github.com/yuin/goldmark v1.1.32/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9de
 github.com/yuin/goldmark v1.2.1/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9decYSb74=
 github.com/yuin/goldmark v1.3.5/go.mod h1:mwnBkeHKe2W/ZEtQ+71ViKU8L12m81fl3OWwC1Zlc8k=
 github.com/yuin/goldmark v1.4.0/go.mod h1:mwnBkeHKe2W/ZEtQ+71ViKU8L12m81fl3OWwC1Zlc8k=
+github.com/yuin/goldmark v1.5.2/go.mod h1:6yULJ656Px+3vBD8DxQVa3kxgyrAnzto9xy5taEt/CY=
 github.com/yuin/goldmark v1.5.3 h1:3HUJmBFbQW9fhQOzMgseU134xfi6hU+mjWywx5Ty+/M=
 github.com/yuin/goldmark v1.5.3/go.mod h1:6yULJ656Px+3vBD8DxQVa3kxgyrAnzto9xy5taEt/CY=
+github.com/yuin/goldmark-emoji v1.0.1 h1:ctuWEyzGBwiucEqxzwe0SOYDXPAucOrE9NQC18Wa1os=
+github.com/yuin/goldmark-emoji v1.0.1/go.mod h1:2w1E6FEWLcDQkoTE+7HU6QF1F6SLlNGjRIBbIZQFqkQ=
 github.com/yvasiyarov/go-metrics v0.0.0-20140926110328-57bccd1ccd43/go.mod h1:aX5oPXxHm3bOH+xeAttToC8pqch2ScQN/JoXYupl6xs=
 github.com/yvasiyarov/gorelic v0.0.0-20141212073537-a9bba5b9ab50/go.mod h1:NUSPSUX/bi6SeDMUh6brw0nXpxHnc96TguQh0+r/ssA=
 github.com/yvasiyarov/newrelic_platform_go v0.0.0-20140908184405-b21fdbd4370f/go.mod h1:GlGEuHIJweS1mbCqG+7vt2nvWLzLLnRHbXz5JKd/Qbg=
@ -2187,6 +2205,7 @@ golang.org/x/net v0.0.0-20220607020251-c690dde0001d/go.mod h1:XRhObCWvk6IyKnWLug
 golang.org/x/net v0.0.0-20220624214902-1bab6f366d9e/go.mod h1:XRhObCWvk6IyKnWLug+ECip1KBveYUHfp+8e9klMJ9c=
 golang.org/x/net v0.0.0-20220826154423-83b083e8dc8b/go.mod h1:YDH+HFinaLZZlnHAfSS6ZXJJ9M9t4Dl22yv3iI2vPwk=
 golang.org/x/net v0.0.0-20220906165146-f3363e06e74c/go.mod h1:YDH+HFinaLZZlnHAfSS6ZXJJ9M9t4Dl22yv3iI2vPwk=
+golang.org/x/net v0.0.0-20221002022538-bcab6841153b/go.mod h1:YDH+HFinaLZZlnHAfSS6ZXJJ9M9t4Dl22yv3iI2vPwk=
 golang.org/x/net v0.5.0 h1:GyT4nK/YDHSqa1c4753ouYCDajOYKTja9Xb/OHtgvSw=
 golang.org/x/net v0.5.0/go.mod h1:DivGGAXEgPSlEBzxGzZI+ZLohi+xUj054jfeKui00ws=
 golang.org/x/oauth2 v0.0.0-20180227000427-d7d64896b5ff/go.mod h1:N/0e6XlmueqKjAGxoOufVs8QHGRruUQn6yWY3a++T0U=
--- a/site/src/api/typesGenerated.ts
+++ b/site/src/api/typesGenerated.ts
@ -753,6 +753,7 @@ export interface TemplateVersion {
 export interface TemplateVersionParameter {
  readonly name: string
  readonly description: string
+  readonly description_plaintext: string
  readonly type: string
  readonly mutable: boolean
  readonly default_value: string
--- a/site/src/components/RichParameterInput/RichParameterInput.tsx
+++ b/site/src/components/RichParameterInput/RichParameterInput.tsx
@ -7,6 +7,7 @@ import { Stack } from "components/Stack/Stack"
 import { FC, useState } from "react"
 import { TemplateVersionParameter } from "../../api/typesGenerated"
 import { colors } from "theme/colors"
+import { MemoizedMarkdown } from "components/Markdown/Markdown"

 const isBoolean = (parameter: TemplateVersionParameter) => {
  return parameter.type === "bool"
@ -41,7 +42,11 @@ const ParameterLabel: FC<ParameterLabelProps> = ({ index, parameter }) => {
          </label>
        </span>
      </span>
-      <span className={styles.labelDescription}>{parameter.description}</span>
+      {parameter.description && (
+        <span className={styles.labelDescription}>
+          <MemoizedMarkdown>{parameter.description}</MemoizedMarkdown>
+        </span>
+      )}
      {!parameter.mutable && (
        <div className={styles.labelImmutable}>
          This parameter cannot be changed after creating workspace.
--- a/site/src/testHelpers/entities.ts
+++ b/site/src/testHelpers/entities.ts
@ -668,6 +668,7 @@ export const MockTemplateVersionParameter1: TypesGen.TemplateVersionParameter =
    name: "first_parameter",
    type: "string",
    description: "This is first parameter",
+    description_plaintext: "Markdown: This is first parameter",
    default_value: "abc",
    mutable: true,
    icon: "/icon/folder.svg",
@ -679,6 +680,7 @@ export const MockTemplateVersionParameter2: TypesGen.TemplateVersionParameter =
    name: "second_parameter",
    type: "number",
    description: "This is second parameter",
+    description_plaintext: "Markdown: This is second parameter",
    default_value: "2",
    mutable: true,
    icon: "/icon/folder.svg",
@ -693,6 +695,7 @@ export const MockTemplateVersionParameter3: TypesGen.TemplateVersionParameter =
    name: "third_parameter",
    type: "string",
    description: "This is third parameter",
+    description_plaintext: "Markdown: This is third parameter",
    default_value: "aaa",
    mutable: true,
    icon: "/icon/database.svg",
@ -706,6 +709,7 @@ export const MockTemplateVersionParameter4: TypesGen.TemplateVersionParameter =
    name: "fourth_parameter",
    type: "string",
    description: "This is fourth parameter",
+    description_plaintext: "Markdown: This is fourth parameter",
    default_value: "def",
    mutable: false,
    icon: "/icon/database.svg",
@ -717,6 +721,7 @@ export const MockTemplateVersionParameter5: TypesGen.TemplateVersionParameter =
    name: "fifth_parameter",
    type: "number",
    description: "This is fifth parameter",
+    description_plaintext: "Markdown: This is fifth parameter",
    default_value: "5",
    mutable: true,
    icon: "/icon/folder.svg",