Expansion support

src/app/writing/basic-writing-and-formatting-syntax/page.md

@@ -97,6 +97,28 @@ This will display the code block with syntax highlighting:
 
 ![Screenshot of three lines of Ruby code as displayed on GitHub. Elements of the code display in purple, blue, and red type, making the lines more visually scannable.](/images/markdown-cheatsheet_syntax-highlighting.png)
 
+## Supported color models
+
+You can call out colors within a sentence by using backticks. A supported color model within backticks will display a visualization of the color.
+
+```markdown
+The background color is `#ffffff` for light mode and `#000000` for dark mode.
+```
+
+![Screenshot of rendered GitHub Markdown showing how HEX values within backticks create small circles of color. #ffffff shows a white circle, and #000000 shows a black circle.](/images/markdown-cheatsheet_highlighting-colors.png)
+
+Here are the currently supported color models.
+
+| Color | Syntax             | Example                    | Output                                                                                                                                                             |
+| ----- | ------------------ | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| HEX   | `` `#RRGGBB` ``    | `` `#0969DA` ``            | ![Screenshot of rendered GitHub Markdown showing how HEX value #0969DA appears with a blue circle.](/images/markdown-cheatsheet_highlighting-colors-hex.png)       |
+| RGB   | `` `rgb(R,G,B)` `` | `` `rgb(9, 105, 218)` ``   | ![Screenshot of rendered GitHub Markdown showing how RGB value 9, 105, 218 appears with a blue circle.](/images/markdown-cheatsheet_highlighting-colors-rgb.png)   |
+| HSL   | `` `hsl(H,S,L)` `` | `` `hsl(212, 92%, 45%)` `` | ![Screenshot of rendered GitHub Markdown showing how HSL value 212, 92%, 45% appears with a blue circle.](/images/markdown-cheatsheet_highlighting-colors-hsl.png) |
+
+{% callout title="Note" type="warning" %}
+A supported color model cannot have any leading or trailing spaces within the backticks.
+{% /callout %}
+
 ## Links
 
 You can create an inline link by wrapping link text in brackets `[ ]`, and then wrapping the URL in parentheses `( )`. You can also use the keyboard shortcut {% kbd s="Command+K" /%}(Mac) or {% kbd s="Ctrl+K" /%}(Windows/Linux) to create a link. When you have text selected, you can paste a URL from your clipboard to automatically create a link from the selection.
@@ -161,11 +183,12 @@ For more examples, see the [GitHub Flavored Markdown Spec](https://github.githu
 To create a task list, preface list items with a hyphen and space followed by `[ ]`. To mark a task as complete, use `[x]`.
 
 ```markdown
-- [ ] Checkbox
-- [x] Task
+- [ ] inkdrop://note/31p7dWY2e
+- [ ] [Support highlighting color codes](inkdrop://note/d4c01itk6)
+- [ ] Add delight to the experience when all tasks are complete 🎉
 ```
 
-![Screenshot showing the rendered version of the markdown. The references to issues are rendered as issue titles.](/images/markdown-cheatsheet_task-list_simple.png)
+![Screenshot showing the rendered version of the markdown. The references to issues are rendered as issue titles.](/images/markdown-cheatsheet_task-list.png)
 
 ## Using emoji