Fixed-width fonts in the markdown editor

Author: guntrip

assets/images/help/writing/enable-fixed-width.png

@@ -29,9 +29,7 @@ You may want to use a dark theme to reduce power consumption on certain devices,
 {% endif %}
 
 {% data reusables.user_settings.access_settings %}
-1. In the user settings sidebar, click **Appearance**.
-
-   !["Appearance" tab in user settings sidebar](/assets/images/help/settings/appearance-tab.png)
+{% data reusables.user_settings.appearance-settings %}
 
 1. Under "Theme mode", select the drop-down menu, then click a theme preference.
 

assets/images/help/writing/fixed-width-example.png

@@ -21,7 +21,20 @@ You can also interact with other users in pull requests and issues using feature
 
 Every comment field on {% data variables.product.product_name %} contains a text formatting toolbar, allowing you to format your text without learning Markdown syntax. In addition to Markdown formatting like bold and italic styles and creating headers, links, and lists, the toolbar includes {% data variables.product.product_name %}-specific features such as @mentions, task lists, and links to issues and pull requests.
 
-![Markdown toolbar](/assets/images/help/writing/markdown-toolbar.gif)
+{% if fixed-width-font-gfm-fields %}
+
+## Enabling fixed-width fonts in the editor
+ 
+You can enable a fixed-width font in every comment field on {% data variables.product.product_name %}. Each character in a fixed-width, or monospace, font occupies the same horizontal space which can make it easier to edit advanced Markdown structures such as tables and code snippets.
+
+![Screenshot showing the {% data variables.product.product_name %} comment field with fixed-width fonts enabled](/assets/images/help/writing/fixed-width-example.png)
+
+{% data reusables.user_settings.access_settings %}
+{% data reusables.user_settings.appearance-settings %}
+1. Under "Markdown editor font preference", select **Use a fixed-width (monospace) font when editing Markdown**.
+  ![Screenshot showing the {% data variables.product.product_name %} comment field with fixed width fonts enabled](/assets/images/help/writing/enable-fixed-width.png)
+
+{% endif %}
 
 ## Further reading
 

content/account-and-profile/setting-up-and-managing-your-github-user-account/managing-user-account-settings/managing-your-theme-settings.md

@@ -78,6 +78,8 @@ git commit
 
 For more information, see "[Creating and highlighting code blocks](/articles/creating-and-highlighting-code-blocks)."
 
+{% data reusables.user_settings.enabling-fixed-width-fonts %}
+
 ## Links
 
 You can create an inline link by wrapping link text in brackets `[ ]`, and then wrapping the URL in parentheses `( )`. {% ifversion fpt or ghae or ghes > 3.1 or ghec %}You can also use the keyboard shortcut `command + k` to create a link.{% endif %}{% ifversion fpt or ghae-issue-5434 or ghes > 3.3 or ghec %} When you have text selected, you can paste a URL from your clipboard to automatically create a link from the selection.{% endif %}

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

@@ -45,6 +45,7 @@ Look! You can see my backticks.
 
 ![Rendered fenced code with backticks block](/assets/images/help/writing/fenced-code-show-backticks-rendered.png)
 
+{% data reusables.user_settings.enabling-fixed-width-fonts %}
 
 ## Syntax highlighting
 

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

@@ -38,6 +38,8 @@ Cells can vary in width and do not need to be perfectly aligned within columns.
 
 ![Rendered table with varied cell width](/assets/images/help/writing/table-varied-columns-rendered.png)
 
+{% data reusables.user_settings.enabling-fixed-width-fonts %}
+
 ## Formatting content within your table
 
 You can use [formatting](/articles/basic-writing-and-formatting-syntax) such as links, inline code blocks, and text styling within your table:

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

@@ -0,0 +1,6 @@
+# Reference: #5278.
+# Documentation for the fixed-width font support for markdown fields.
+versions:
+  fpt: '*'
+  ghec: '*'
+  ghes: '>=3.4'

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

@@ -0,0 +1,3 @@
+1. In the user settings sidebar, click **Appearance**.
+
+   !["Appearance" tab in user settings sidebar](/assets/images/help/settings/appearance-tab.png)

data/features/fixed-width-font-gfm-fields.yml

@@ -0,0 +1,5 @@
+{% if fixed-width-font-gfm-fields %}
+
+If you are frequently editing code snippets and tables, you may benefit from enabling a fixed-width font in all comment fields on {% data variables.product.product_name %}. For more information, see "[Enabling fixed-width fonts in the editor](/github/writing-on-github/getting-started-with-writing-and-formatting-on-github/about-writing-and-formatting-on-github#enabling-fixed-width-fonts-in-the-editor)."
+
+{% endif %}