Add product callout + use it to specify that Markdown docs are for web interface (#53153)

content/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/about-writing-and-formatting-on-github.md

@@ -1,6 +1,7 @@
 ---
 title: About writing and formatting on GitHub
 intro: GitHub combines a syntax for formatting text called GitHub Flavored Markdown with a few unique writing features.
+product: '{% data reusables.gated-features.markdown-ui %}'
 redirect_from:
   - /articles/about-writing-and-formatting-on-github
   - /github/writing-on-github/about-writing-and-formatting-on-github

content/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax.md

@@ -1,6 +1,7 @@
 ---
 title: Basic writing and formatting syntax
 intro: Create sophisticated formatting for your prose and code on GitHub with simple syntax.
+product: '{% data reusables.gated-features.markdown-ui %}'
 redirect_from:
   - /articles/basic-writing-and-formatting-syntax
   - /github/writing-on-github/basic-writing-and-formatting-syntax

content/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/quickstart-for-writing-on-github.md

@@ -1,6 +1,7 @@
 ---
 title: Quickstart for writing on GitHub
 intro: 'Learn advanced formatting features by creating a README for your {% data variables.product.prodname_dotcom %} profile.'
+product: '{% data reusables.gated-features.markdown-ui %}'
 versions:
   fpt: '*'
   ghes: '*'

content/get-started/writing-on-github/working-with-advanced-formatting/about-task-lists.md

@@ -1,6 +1,7 @@
 ---
 title: About task lists
 intro: 'You can use task lists to break the work for an issue or pull request into smaller tasks, then track the full set of work to completion.'
+product: '{% data reusables.gated-features.markdown-ui %}'
 redirect_from:
   - /github/managing-your-work-on-github/managing-your-work-with-issues-and-pull-requests/about-task-lists
   - /articles/about-task-lists

content/get-started/writing-on-github/working-with-advanced-formatting/attaching-files.md

@@ -1,6 +1,7 @@
 ---
 title: Attaching files
 intro: You can convey information by attaching a variety of file types to your issues and pull requests.
+product: '{% data reusables.gated-features.markdown-ui %}'
 redirect_from:
   - /github/managing-your-work-on-github/managing-your-work-with-issues-and-pull-requests/file-attachments-on-issues-and-pull-requests
   - /articles/issue-attachments

content/get-started/writing-on-github/working-with-advanced-formatting/autolinked-references-and-urls.md

@@ -1,6 +1,7 @@
 ---
 title: Autolinked references and URLs
 intro: 'References to URLs, issues, pull requests, and commits are automatically shortened and converted into links.'
+product: '{% data reusables.gated-features.markdown-ui %}'
 redirect_from:
   - /articles/autolinked-references-and-urls
   - /github/writing-on-github/autolinked-references-and-urls

content/get-started/writing-on-github/working-with-advanced-formatting/creating-a-permanent-link-to-a-code-snippet.md

@@ -1,6 +1,7 @@
 ---
 title: Creating a permanent link to a code snippet
 intro: You can create a permanent link to a specific line or range of lines of code in a specific version of a file or pull request.
+product: '{% data reusables.gated-features.markdown-ui %}'
 redirect_from:
   - /github/managing-your-work-on-github/managing-your-work-with-issues-and-pull-requests/creating-a-permanent-link-to-a-code-snippet
   - /articles/creating-a-permanent-link-to-a-code-snippet

content/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks.md

@@ -1,6 +1,7 @@
 ---
 title: Creating and highlighting code blocks
 intro: Share samples of code with fenced code blocks and enabling syntax highlighting.
+product: '{% data reusables.gated-features.markdown-ui %}'
 redirect_from:
   - /articles/creating-and-highlighting-code-blocks
   - /github/writing-on-github/creating-and-highlighting-code-blocks

content/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams.md

@@ -1,6 +1,7 @@
 ---
 title: Creating diagrams
 intro: Create diagrams to convey information through charts and graphs
+product: '{% data reusables.gated-features.markdown-ui %}'
 versions:
   feature: mermaid
 shortTitle: Create diagrams

content/get-started/writing-on-github/working-with-advanced-formatting/organizing-information-with-collapsed-sections.md

@@ -1,6 +1,7 @@
 ---
 title: Organizing information with collapsed sections
 intro: You can streamline your Markdown by creating a collapsed section with the `<details>` tag.
+product: '{% data reusables.gated-features.markdown-ui %}'
 versions:
   fpt: '*'
   ghes: '*'

content/get-started/writing-on-github/working-with-advanced-formatting/organizing-information-with-tables.md

@@ -1,6 +1,7 @@
 ---
 title: Organizing information with tables
 intro: 'You can build tables to organize information in comments, issues, pull requests, and wikis.'
+product: '{% data reusables.gated-features.markdown-ui %}'
 redirect_from:
   - /articles/organizing-information-with-tables
   - /github/writing-on-github/organizing-information-with-tables

content/get-started/writing-on-github/working-with-advanced-formatting/using-keywords-in-issues-and-pull-requests.md

@@ -1,6 +1,7 @@
 ---
 title: Using keywords in issues and pull requests
 intro: Use keywords to link an issue and pull request or to mark an issue or pull request as a duplicate.
+product: '{% data reusables.gated-features.markdown-ui %}'
 versions:
   fpt: '*'
   ghes: '*'

content/get-started/writing-on-github/working-with-advanced-formatting/writing-mathematical-expressions.md

@@ -1,6 +1,7 @@
 ---
 title: Writing mathematical expressions
 intro: 'Use Markdown to display mathematical expressions on {% data variables.product.company_short %}.'
+product: '{% data reusables.gated-features.markdown-ui %}'
 versions:
   feature: math
 shortTitle: Mathematical expressions

data/reusables/gated-features/markdown-ui.md

@@ -0,0 +1 @@
+Markdown can be used in the {% data variables.product.github %} web interface.