Editable placeholder variable

The <var> element lets readers replace placeholder variables with their own values.

General usage

Editable placeholder variables in a Markdown click-to-copy code block are editable by default.

Edit the name of this PROJECT_ID.

Enabling editability

Add an edit class to the <var> element to create a variable that is EDITABLE outside of a code block.

Disabling editability

This example adds the `readonly` class to the <var> element to create an
UNEDITABLE_VARIABLE.

This example adds the `readonly` class to the code block to disable editability
of both VARIABLE_1 and VARIABLE_2.

Tooltips

This EDITABLE variable has a tooltip that defaults to the
name of its original placeholder text.

This EDITABLE variable uses a `label`
attribute to create a custom tooltip named
Edit me.

Synchronization

Editable placeholder variables that have the same scope synchronize with each other and immediately update to reflect the new value.

Disabling synchronization

This variable synchronizes by default because it is in a click-to-copy code
block. It has a `label` attribute named `variable with scope`:
  VARIABLE

This variable adds the `no-scope` class so that it does not synchronize with the
other variables and has a `label` attribute named `variable without scope`:
  VARIABLE

This variable also synchronizes by default and has a `label` attribute named
`variable with scope`:
  VARIABLE

Enabling synchronization

This placeholder VARIABLE is set outside of a code block and uses the scope attribute to synchronize with the variables in the disabling synchronization section above.